/* Styles for alexsheleheda.co.uk (index.html).
Sections follow the page from top to bottom: tokens, header, hero, skills,
about, projects, get a quote, contact, footer; then hover and reduced-motion rules. */
/* ── TOKENS ── */
:root {
/* Colours */
--cream: #FFF5E0;
--white: #FFFFFD;
--orange: #F69540;
/* Orange TEXT. The orange above is for fills (buttons, shapes, arrows, lines); as text
on cream or white it's only 2.1:1, too faint to read well. These darker ones are
the same orange, deepened just enough:
--orange-text: big or bold text (Contact heading, "work:", the phone menu), 3:1
--orange-text-small: small text (the active item of the desktop menu), 4.5:1
To go back to how it was, set both to var(--orange). */
--orange-text: #E06E0B;
--orange-text-small: #B25808;
--text: #56524E;
--status: #49F91D;
--peach: #FBCFA8;
--yellow: #F5CE52; /* "Concept" tag */
--line: #BAB1B1; /* the line under section titles */
--muted: #75706B; /* small grey text; still readable on white and cream */
--on-orange: #3E3A37; /* text on orange: buttons and the footer (5:1); the About text colour would be only 3.4:1 */
--soft-line: #E8E2DA; /* thin borders of cards and answers */
--field-line: #D6C6AF; /* underline of form fields on the cream Contact background */
--chip-line: #CFC2B1; /* thin border of the answer pills */
--footer-text: var(--on-orange); /* the footer is orange too */
/* Peach header: your white header over the orange section.
Almost opaque, so it looks the same over white, cream and orange */
--header-bg: rgba(251, 207, 168, 0.9); /* #FBCFA8 */
--focus: #B5580A; /* darker orange: 3.3:1 on the header, 4.8:1 on white */
/* Fluid sizes (designed at 1920px wide) */
--radius: clamp(30px, 7.8vw, 150px);
--radius-scrolled: clamp(20px, 5.2vw, 100px);
--bar-h: clamp(60px, 7.8vw, 150px); /* header and footer */
--footer-h: var(--bar-h); /* the script sets the footer's real height */
--header-h-scrolled: clamp(50px, 5.2vw, 100px);
--backdrop-h: clamp(150px, 15.6vw, 300px);
--gutter: clamp(20px, 5vw, 100px); /* side padding, same as the header */
--reveal: 318px; /* how far the Skills strip slides out from under Hero */
/* Screen height. svh = the visible area on phones, with the browser toolbars showing */
--screen-h: 100vh;
}
@supports (height: 100svh) {
:root { --screen-h: 100svh; }
}
/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
/* Hidden on screen, still read by screen readers */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-h-scrolled); /* anchors don't end up under the fixed header */
}
body {
background: var(--white);
color: var(--text);
font-family: 'Syne', sans-serif;
}
/* ── SELECTION ──
Selecting text looks like the yellow marker used across the site.
Only real text can be selected: photos, shapes, arrows and the controls
(menu, buttons, cards, answers, labels) stay out of it, so a drag,
a double-click or Ctrl+A only highlights what's worth copying. */
::selection { background: var(--yellow); color: var(--on-orange); }
mark::selection, mark ::selection { background: rgb(246 149 64 / 0.55); } /* text already on the yellow marker */
img, svg, picture, video {
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none; /* photos and drawings can't be dragged off the page by accident */
}
.header, .menu-drawer, .hero-title, .skills-section, .about-tag, .contact-heading,
.btn, button, .header-cta, .calc-next, .calc-back, .contact-send, .cr-btn, .result-restart,
.quote-attached-icon, .quote-attached-actions,
.project-card, .project-tag, .project-dialog-visit, .project-dialog-close,
.chip, .calc-option, .calc-step, .calc-progress, .result-label,
.field label, .field legend, .footer-top {
-webkit-user-select: none;
user-select: none;
}
/* phones: no grey/blue flash when you tap a link or button (they have their own pressed look) */
html { -webkit-tap-highlight-color: transparent; }
/* the blinking cursor in the form fields is orange too */
input, textarea { caret-color: var(--orange-text); }
/* ── HEADER ── */
.header {
position: fixed;
top: 0; left: 0;
z-index: 100;
width: 100%;
height: var(--bar-h);
background: var(--header-bg);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
--header-r: var(--radius); /* the bottom corners (the opening animation ends on them) */
border-radius: 0 0 var(--header-r) var(--header-r);
transition: height 0.4s ease, border-radius 0.4s ease;
animation: header-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}
.header.scrolled {
height: var(--header-h-scrolled);
--header-r: var(--radius-scrolled);
}
/* Opening the page: the header comes out from behind the top edge of the screen,
growing to the sides and down at the same time until it fills its place.
It's a clip-path (a "window" onto the header), so nothing inside gets squashed.
After the animation the clip is gone; the last frame matches the real corners,
so there's no jump. */
@keyframes header-in {
from { clip-path: inset(0 calc(50% - 40px) 100% calc(50% - 40px) round 0 0 999px 999px); }
to { clip-path: inset(0 0 0 0 round 0 0 var(--header-r) var(--header-r)); }
}
/* then what's inside fades in, left to right */
.header-content,
.nav,
.header-right { animation: header-content-in 0.5s ease-out backwards; }
.header-content { animation-delay: 0.7s; }
.nav { animation-delay: 0.8s; }
.header-right { animation-delay: 0.9s; }
@keyframes header-content-in {
from { opacity: 0; transform: translateY(-8px); }
}
/* Three columns: left, centre, right */
.header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
height: 100%;
padding: 0 var(--gutter);
}
.header-content {
display: flex;
align-items: center;
gap: 10px;
}
.header-right {
display: flex;
justify-content: flex-end;
padding-right: clamp(10px, 2vw, 40px);
}
/* The "Open to work" dot glows: two soft green glows grow and fade one after the
other, all the time (the same waves as Get in touch on hover, sized to the dot) */
.header-dot {
--dot: clamp(8px, 0.7vw, 14px);
position: relative;
flex-shrink: 0;
width: var(--dot);
height: var(--dot);
border-radius: 50%;
background: var(--status);
animation: status-glow 2s ease-out infinite;
}
@keyframes status-glow {
0% { box-shadow: 0 0 calc(var(--dot) * 0.3) 0 rgb(73 249 29 / 0.9),
0 0 calc(var(--dot) * 0.3) 0 rgb(73 249 29 / 0.9); }
50% { box-shadow: 0 0 calc(var(--dot) * 1.3) calc(var(--dot) * 0.9) rgb(73 249 29 / 0),
0 0 calc(var(--dot) * 0.3) 0 rgb(73 249 29 / 0.9); }
100% { box-shadow: 0 0 calc(var(--dot) * 1.3) calc(var(--dot) * 0.9) rgb(73 249 29 / 0),
0 0 calc(var(--dot) * 1.3) calc(var(--dot) * 0.9) rgb(73 249 29 / 0); }
}
.header-label {
font-weight: 700;
font-size: clamp(14px, 1.25vw, 24px);
white-space: nowrap; /* "Open to work" stays on one line */
}
/* ── NAV ── */
.nav {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(2px, 0.5vw, 8px);
}
.nav a {
position: relative;
z-index: 1;
padding: clamp(6px, 0.6vw, 10px) clamp(16px, 1.5vw, 28px);
font-weight: 500;
font-size: clamp(13px, 1.25vw, 24px);
color: var(--text);
text-decoration: none;
white-space: nowrap;
transition: color 0.35s ease;
}
.nav a.active { color: var(--orange-text-small); }
/* Hover line: white, like the capsule, grows from the middle of the word
out to both sides. As wide as the text (inset by the link's side padding). */
.nav a::after {
content: '';
position: absolute;
left: clamp(16px, 1.5vw, 28px);
right: clamp(16px, 1.5vw, 28px);
bottom: clamp(2px, 0.25vw, 5px);
height: clamp(2px, 0.14vw, 3px);
border-radius: 2px;
background: var(--white);
transform: scaleX(0); /* folded into its centre */
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Pill behind the active link, moved by JS */
.nav-pill {
position: absolute;
top: 50%;
left: 0;
z-index: 0;
height: 100%;
background: var(--white);
border-radius: 40px;
transform: translateY(-50%);
transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
/* "Get in touch" on the right of the header (takes you to the form) */
.header-cta {
display: inline-flex;
align-items: center;
height: clamp(36px, 2.64vw, 50px);
padding: 0 clamp(16px, 1.32vw, 26px);
border-radius: 999px;
background: var(--orange);
font-weight: 700;
font-size: clamp(14px, 1.04vw, 20px);
color: var(--on-orange); /* dark text: 5:1 on orange (white was 2.3:1) */
text-decoration: none;
white-space: nowrap;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.header-cta:focus-visible { border-radius: 999px; }
/* "Look here": Contact me (Hero), Discuss your project (About) and Send message
(Contact) send out a few of the same orange waves once, by themselves, where
their arrows point.
2 rounds = 4 waves (about 4 seconds), then they stop, so it doesn't nag. */
.btn.is-cue,
.contact-send.is-cue { animation: cta-waves 2s ease-out 2; }
/* Hero: the opening animation (long finished) stays first in the list. Without it,
when the waves end the browser treats the opening as new and plays it again:
the button would vanish for a second and slide in a second time. */
.hero-actions .btn.is-cue {
animation: hero-btn-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--in-delay, 0s) backwards,
cta-waves 2s ease-out 2;
}
/* Two soft glows (a shadow with blur, not hard rings) grow and fade one after
the other, so a new wave starts every second */
/* The glow is the buttons' own orange (246 149 64) */
@keyframes cta-waves {
0% { box-shadow: 0 0 4px 0 rgb(246 149 64 / 0.9), 0 0 4px 0 rgb(246 149 64 / 0.9); }
50% { box-shadow: 0 0 18px 14px rgb(246 149 64 / 0), 0 0 4px 0 rgb(246 149 64 / 0.9); }
100% { box-shadow: 0 0 18px 14px rgb(246 149 64 / 0), 0 0 18px 14px rgb(246 149 64 / 0); }
}
/* ── PAGE ── */
/* Wrapper for everything under the header. It clips the slide-in animations
at the bottom of the page. clip (unlike hidden) doesn't create a scroll
container, so position: sticky will still work inside it. */
.page {
position: relative;
overflow: hidden; /* fallback for older browsers */
overflow: clip;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.6s ease;
}
.hero {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: var(--screen-h); /* min-height: grows with content instead of overflowing */
/* top: clear the fixed header; bottom: extra space so the content sits
a little above the centre, like in the mockup */
padding-top: calc(var(--bar-h) + 24px);
padding-bottom: calc(var(--screen-h) * 0.27);
background: var(--cream);
border-radius: 0 0 var(--radius) var(--radius);
}
/* ── HERO CONTENT (phone layout; wider screens come next) ── */
/* Sizes inside are in cqw: 1cqw = 1% of this block's width.
So on narrower phones the whole composition shrinks together. */
.hero-inner {
container-type: inline-size;
width: min(100% - 2 * var(--gutter), 322px);
}
/* Photo and name share one grid cell, so they overlap.
Layers from bottom to top: "Alex" → photo → "Sheleheda" */
.hero-visual { display: grid; }
.hero-title,
.hero-photo { grid-area: 1 / 1; }
/* A box for the photo and the two orange shapes behind it.
Everything inside is placed in % of this box, so it all scales together. */
.hero-photo {
position: relative;
z-index: 1;
justify-self: end;
align-self: end;
width: 49.2cqw;
aspect-ratio: 158.4 / 244.9;
overflow: hidden; /* crops the photo at the bottom of the box */
/* fades the bottom of the box (photo and shapes) into the background */
-webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent);
mask-image: linear-gradient(to bottom, #000 76%, transparent);
}
.hero-photo img {
position: absolute;
display: block;
height: auto;
}
/* Layers: shapes first in the HTML, the person last, so the person is on top */
.hero-shape-top { left: 3.2%; top: 0; width: 55.7%; }
.hero-shape-bottom { left: 24.9%; top: 29.4%; width: 75.1%; }
/* Your photo has transparent space around the person, so the image itself
is wider than the box and sticks out on both sides (the box crops it) */
.hero-person { left: -19.4%; top: 1.1%; width: 133.1%; }
.hero-title {
align-self: end;
font-weight: 800;
line-height: 1;
}
.hero-first,
.hero-last {
position: relative;
display: block;
}
.hero-first {
margin-left: 8cqw;
font-size: 14.5cqw;
color: var(--text);
}
/* "Sheleheda" is an SVG (to keep the cuts in S and a); its alt text keeps
the heading readable for screen readers and search engines */
.hero-last {
z-index: 2; /* above the photo */
width: 93.32cqw;
height: auto;
margin: 4.22cqw 0 -0.34cqw 3.2cqw; /* bottom edge sits at the bottom of the photo */
}
.hero-actions {
display: flex;
gap: 16px;
margin-top: 50px;
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
border-radius: 999px;
font-weight: 700; /* all buttons on the site: 700 */
font-size: 18px;
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary {
flex: 1;
background: var(--orange);
color: var(--on-orange); /* dark text: 5:1 on orange (white was 2.3:1) */
}
.btn-contact {
flex-shrink: 0;
width: 80px;
border: 1px solid var(--orange);
color: var(--text); /* dark text/icon; orange text on cream was only 2.1:1. The outline stays orange. */
}
.btn-contact-icon { width: 32px; height: 28px; }
/* On phones the button shows only the icon; the text stays for screen readers */
.btn-contact-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.hero-arrow { display: none; } /* desktop only */
/* ── HERO — OPENING ANIMATION ── */
/* Plays once when the page opens, at the same time as the header.
Each piece starts before the previous one has finished, so it all flows
and everything is readable and clickable after about 1.6 seconds.
"backwards" = each piece waits hidden until its turn; when its animation
ends, the normal styles take over (so hover effects work as usual). */
.hero-first { animation: hero-alex-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards; }
.hero-last { animation: hero-last-in 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.45s backwards; }
.hero-person { animation: hero-photo-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards; }
/* the orange shapes come out from behind the person: each grows from its corner
nearest to the photo's centre. No overshoot and no turning: the shapes touch
the edges of the photo box, and anything bigger than their final size would be cut off */
/* Then they float: each drifts slowly along x and y and turns a tiny bit, and each
of those is its own slow wave with its own length. The lengths don't divide into
each other, so the waves keep meeting differently: sometimes a shape goes up and
down, sometimes round in a circle one way or the other (a Lissajous figure), and
the pattern doesn't repeat. The two shapes have different lengths too, so they
drift apart and back together. The ease is a sine curve, so there are no stops.
The shapes touch the edges of the photo box (the top one the top edge, the bottom
one the right edge), so those two only drift inwards, never past the edge.
translate/rotate are separate from transform, so they add to the entrance. */
.hero-shape-top {
transform-origin: 100% 100%;
translate: var(--float-x) var(--float-y);
rotate: var(--float-r);
animation: hero-shape-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.85s backwards,
shape-top-x 4.3s cubic-bezier(0.37, 0, 0.63, 1) -1.7s infinite alternate,
shape-top-y 3.1s cubic-bezier(0.37, 0, 0.63, 1) -0.4s infinite alternate,
shape-top-r 5.9s cubic-bezier(0.37, 0, 0.63, 1) -2.9s infinite alternate;
}
.hero-shape-bottom {
transform-origin: 0 0;
translate: var(--float-x) var(--float-y);
rotate: var(--float-r);
animation: hero-shape-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.95s backwards,
shape-bottom-x 3.7s cubic-bezier(0.37, 0, 0.63, 1) -2.2s infinite alternate,
shape-bottom-y 4.9s cubic-bezier(0.37, 0, 0.63, 1) -3.3s infinite alternate,
shape-bottom-r 6.7s cubic-bezier(0.37, 0, 0.63, 1) -1.1s infinite alternate;
}
.hero-shape-top, .hero-shape-bottom { will-change: translate, rotate; }
/* resting while Hero is scrolled away (the script sets .is-away) */
.hero.is-away .hero-shape-top,
.hero.is-away .hero-shape-bottom { animation-play-state: paused; }
/* The delay is a variable rather than animation-delay: animation-delay would also
delay the "look here" waves (see .is-cue), which share this animation list. */
.hero-actions .btn { animation: hero-btn-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--in-delay, 0s) backwards; }
.hero-actions .btn:nth-child(1) { --in-delay: 1s; }
.hero-actions .btn:nth-child(2) { --in-delay: 1.1s; }
/* Which arrow each screen gets (the same choice the made before) */
@media (744px <= width < 1024px) and (height >= 740px) { .hero-arrow--mini { display: block; } }
@media (width >= 1024px) and (orientation: portrait) { .hero-arrow--vertical { display: block; } }
@media (1024px <= width < 1920px) and (orientation: landscape) { .hero-arrow--desk { display: block; } }
@media (width >= 1920px) and (orientation: landscape) { .hero-arrow--wide { display: block; } }
/* The arrow draws itself like a pen: the line is one long dash that slides into
place (dashoffset 1 = nothing drawn, 0 = all drawn), tail first.
The pen moves like a little roller coaster: it starts smoothly, speeds up going
down, slows climbing (most at the top of the loop, where it turns tightly) and
speeds up again on the way down. The speed is baked into the linear() curve.
The line starts thin, like a pen just touching the paper: a still mask on it
(narrow at the start, full width after), set in the markup of each arrow.
"forwards" keeps it drawn when the animation ends.
When the pen reaches the tip, the head springs out of it (a bit too big, then
settles) and pokes Contact me: the button jolts the way the arrow points and
sends out its orange waves (that part is in the script at the bottom). */
.hero-arrow .arrow-line { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.hero-arrow--desk .arrow-line {
animation: draw-line 1s cubic-bezier(0.45, 0, 0.3, 1) 1.3s forwards;
animation-timing-function: linear(0.0099 0.00%, 0.0139 1.25%, 0.0181 2.50%, 0.0226 3.75%, 0.0274 5.00%, 0.0327 6.25%, 0.0384 7.50%, 0.0447 8.75%, 0.0515 10.00%, 0.0589 11.25%, 0.0669 12.50%, 0.0753 13.75%, 0.0841 15.00%, 0.0932 16.25%, 0.1027 17.50%, 0.1125 18.75%, 0.1226 20.00%, 0.1330 21.25%, 0.1437 22.50%, 0.1547 23.75%, 0.1660 25.00%, 0.1776 26.25%, 0.1895 27.50%, 0.2017 28.75%, 0.2143 30.00%, 0.2271 31.25%, 0.2402 32.50%, 0.2536 33.75%, 0.2673 35.00%, 0.2812 36.25%, 0.2955 37.50%, 0.3099 38.75%, 0.3247 40.00%, 0.3397 41.25%, 0.3548 42.50%, 0.3702 43.75%, 0.3858 45.00%, 0.4016 46.25%, 0.4175 47.50%, 0.4335 48.75%, 0.4497 50.00%, 0.4660 51.25%, 0.4824 52.50%, 0.4988 53.75%, 0.5153 55.00%, 0.5318 56.25%, 0.5483 57.50%, 0.5648 58.75%, 0.5812 60.00%, 0.5976 61.25%, 0.6139 62.50%, 0.6301 63.75%, 0.6462 65.00%, 0.6621 66.25%, 0.6779 67.50%, 0.6935 68.75%, 0.7089 70.00%, 0.7241 71.25%, 0.7391 72.50%, 0.7538 73.75%, 0.7684 75.00%, 0.7826 76.25%, 0.7966 77.50%, 0.8104 78.75%, 0.8239 80.00%, 0.8371 81.25%, 0.8500 82.50%, 0.8626 83.75%, 0.8749 85.00%, 0.8869 86.25%, 0.8987 87.50%, 0.9101 88.75%, 0.9212 90.00%, 0.9321 91.25%, 0.9426 92.50%, 0.9529 93.75%, 0.9628 95.00%, 0.9725 96.25%, 0.9819 97.50%, 0.9910 98.75%, 1.0000 100.00%);
}
.hero-arrow--mini .arrow-line {
animation: draw-line 0.65s cubic-bezier(0.45, 0, 0.3, 1) 1.3s forwards;
animation-timing-function: linear(0.0099 0.00%, 0.0146 1.25%, 0.0196 2.50%, 0.0249 3.75%, 0.0305 5.00%, 0.0365 6.25%, 0.0429 7.50%, 0.0498 8.75%, 0.0570 10.00%, 0.0647 11.25%, 0.0726 12.50%, 0.0809 13.75%, 0.0894 15.00%, 0.0980 16.25%, 0.1067 17.50%, 0.1156 18.75%, 0.1246 20.00%, 0.1336 21.25%, 0.1428 22.50%, 0.1521 23.75%, 0.1615 25.00%, 0.1710 26.25%, 0.1806 27.50%, 0.1903 28.75%, 0.2001 30.00%, 0.2101 31.25%, 0.2201 32.50%, 0.2303 33.75%, 0.2406 35.00%, 0.2510 36.25%, 0.2616 37.50%, 0.2723 38.75%, 0.2831 40.00%, 0.2940 41.25%, 0.3051 42.50%, 0.3163 43.75%, 0.3276 45.00%, 0.3391 46.25%, 0.3507 47.50%, 0.3625 48.75%, 0.3744 50.00%, 0.3865 51.25%, 0.3987 52.50%, 0.4111 53.75%, 0.4236 55.00%, 0.4363 56.25%, 0.4492 57.50%, 0.4622 58.75%, 0.4754 60.00%, 0.4888 61.25%, 0.5024 62.50%, 0.5161 63.75%, 0.5300 65.00%, 0.5441 66.25%, 0.5584 67.50%, 0.5729 68.75%, 0.5875 70.00%, 0.6024 71.25%, 0.6174 72.50%, 0.6327 73.75%, 0.6481 75.00%, 0.6638 76.25%, 0.6796 77.50%, 0.6957 78.75%, 0.7119 80.00%, 0.7284 81.25%, 0.7450 82.50%, 0.7619 83.75%, 0.7790 85.00%, 0.7963 86.25%, 0.8138 87.50%, 0.8314 88.75%, 0.8494 90.00%, 0.8675 91.25%, 0.8858 92.50%, 0.9043 93.75%, 0.9230 95.00%, 0.9420 96.25%, 0.9611 97.50%, 0.9805 98.75%, 1.0000 100.00%);
}
.hero-arrow--vertical .arrow-line {
animation: draw-line 0.9s cubic-bezier(0.45, 0, 0.3, 1) 1.3s forwards;
animation-timing-function: linear(0.0099 0.00%, 0.0144 1.25%, 0.0191 2.50%, 0.0242 3.75%, 0.0295 5.00%, 0.0353 6.25%, 0.0414 7.50%, 0.0481 8.75%, 0.0552 10.00%, 0.0626 11.25%, 0.0705 12.50%, 0.0786 13.75%, 0.0869 15.00%, 0.0953 16.25%, 0.1039 17.50%, 0.1126 18.75%, 0.1214 20.00%, 0.1303 21.25%, 0.1393 22.50%, 0.1484 23.75%, 0.1577 25.00%, 0.1671 26.25%, 0.1766 27.50%, 0.1862 28.75%, 0.1960 30.00%, 0.2059 31.25%, 0.2159 32.50%, 0.2261 33.75%, 0.2364 35.00%, 0.2469 36.25%, 0.2575 37.50%, 0.2682 38.75%, 0.2791 40.00%, 0.2902 41.25%, 0.3014 42.50%, 0.3128 43.75%, 0.3243 45.00%, 0.3360 46.25%, 0.3478 47.50%, 0.3598 48.75%, 0.3720 50.00%, 0.3843 51.25%, 0.3968 52.50%, 0.4095 53.75%, 0.4223 55.00%, 0.4353 56.25%, 0.4485 57.50%, 0.4619 58.75%, 0.4754 60.00%, 0.4891 61.25%, 0.5030 62.50%, 0.5170 63.75%, 0.5312 65.00%, 0.5456 66.25%, 0.5602 67.50%, 0.5749 68.75%, 0.5898 70.00%, 0.6049 71.25%, 0.6201 72.50%, 0.6356 73.75%, 0.6512 75.00%, 0.6670 76.25%, 0.6829 77.50%, 0.6991 78.75%, 0.7154 80.00%, 0.7318 81.25%, 0.7485 82.50%, 0.7653 83.75%, 0.7824 85.00%, 0.7995 86.25%, 0.8169 87.50%, 0.8344 88.75%, 0.8521 90.00%, 0.8700 91.25%, 0.8881 92.50%, 0.9063 93.75%, 0.9247 95.00%, 0.9433 96.25%, 0.9621 97.50%, 0.9810 98.75%, 1.0000 100.00%);
}
.hero-arrow--wide .arrow-line {
animation: draw-line 1.7s cubic-bezier(0.45, 0, 0.3, 1) 1.3s forwards;
animation-timing-function: linear(0.0099 0.00%, 0.0141 1.25%, 0.0187 2.50%, 0.0236 3.75%, 0.0289 5.00%, 0.0348 6.25%, 0.0414 7.50%, 0.0487 8.75%, 0.0568 10.00%, 0.0656 11.25%, 0.0751 12.50%, 0.0852 13.75%, 0.0957 15.00%, 0.1068 16.25%, 0.1182 17.50%, 0.1301 18.75%, 0.1423 20.00%, 0.1549 21.25%, 0.1679 22.50%, 0.1812 23.75%, 0.1948 25.00%, 0.2086 26.25%, 0.2226 27.50%, 0.2368 28.75%, 0.2511 30.00%, 0.2654 31.25%, 0.2797 32.50%, 0.2939 33.75%, 0.3080 35.00%, 0.3219 36.25%, 0.3355 37.50%, 0.3488 38.75%, 0.3615 40.00%, 0.3735 41.25%, 0.3845 42.50%, 0.3946 43.75%, 0.4039 45.00%, 0.4125 46.25%, 0.4208 47.50%, 0.4287 48.75%, 0.4365 50.00%, 0.4442 51.25%, 0.4520 52.50%, 0.4597 53.75%, 0.4676 55.00%, 0.4755 56.25%, 0.4836 57.50%, 0.4920 58.75%, 0.5009 60.00%, 0.5103 61.25%, 0.5205 62.50%, 0.5319 63.75%, 0.5446 65.00%, 0.5586 66.25%, 0.5739 67.50%, 0.5904 68.75%, 0.6079 70.00%, 0.6263 71.25%, 0.6455 72.50%, 0.6652 73.75%, 0.6851 75.00%, 0.7051 76.25%, 0.7250 77.50%, 0.7446 78.75%, 0.7640 80.00%, 0.7829 81.25%, 0.8014 82.50%, 0.8194 83.75%, 0.8368 85.00%, 0.8537 86.25%, 0.8700 87.50%, 0.8858 88.75%, 0.9009 90.00%, 0.9154 91.25%, 0.9293 92.50%, 0.9425 93.75%, 0.9552 95.00%, 0.9672 96.25%, 0.9786 97.50%, 0.9895 98.75%, 1.0000 100.00%);
}
.hero-arrow .arrow-head {
animation: arrow-head-pop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-timing-function: linear(0.0000 0.0%, 0.1349 2.5%, 0.2600 5.0%, 0.3754 7.5%, 0.4816 10.0%, 0.5789 12.5%, 0.6677 15.0%, 0.7482 17.5%, 0.8208 20.0%, 0.8859 22.5%, 0.9438 25.0%, 0.9947 27.5%, 1.0392 30.0%, 1.0775 32.5%, 1.1099 35.0%, 1.1367 37.5%, 1.1584 40.0%, 1.1752 42.5%, 1.1875 45.0%, 1.1957 47.5%, 1.2000 50.0%, 1.2008 52.5%, 1.1984 55.0%, 1.1933 57.5%, 1.1856 60.0%, 1.1758 62.5%, 1.1642 65.0%, 1.1510 67.5%, 1.1368 70.0%, 1.1218 72.5%, 1.1062 75.0%, 1.0906 77.5%, 1.0752 80.0%, 1.0603 82.5%, 1.0464 85.0%, 1.0336 87.5%, 1.0224 90.0%, 1.0131 92.5%, 1.0061 95.0%, 1.0016 97.5%, 1.0000 100.0%);
}
.hero-arrow--desk .arrow-head { animation-delay: 2.3s; }
.hero-arrow--mini .arrow-head { animation-delay: 1.95s; }
.hero-arrow--vertical .arrow-head { animation-delay: 2.2s; }
.hero-arrow--wide .arrow-head { animation-delay: 3s; }
/* "Alex" rises from under an invisible line at its bottom:
it starts one full height lower and fully hidden, and as it moves up
the hidden part shrinks by the same amount, so the cut stays in place */
@keyframes hero-alex-in {
from { transform: translateY(100%); clip-path: inset(-20% -5% 100% -5%); }
to { transform: none; clip-path: inset(-20% -5% 0 -5%); }
}
/* "Sheleheda" appears left to right, as if being written */
@keyframes hero-last-in {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 -2% 0 0); }
}
@keyframes hero-photo-in {
from { opacity: 0; transform: translateY(6%); }
}
@keyframes hero-shape-in {
from { opacity: 0; transform: scale(0.55); }
}
/* the floating (see .hero-shape-top): % of the shape's own size, so it scales */
@property --float-x { syntax: ''; inherits: false; initial-value: 0%; }
@property --float-y { syntax: ''; inherits: false; initial-value: 0%; }
@property --float-r { syntax: ''; inherits: false; initial-value: 0deg; }
@keyframes shape-top-x { from { --float-x: -3%; } to { --float-x: 3%; } }
@keyframes shape-top-y { from { --float-y: 0.6%; } to { --float-y: 4.6%; } } /* down only */
@keyframes shape-top-r { from { --float-r: -1.2deg; } to { --float-r: 1.2deg; } }
@keyframes shape-bottom-x { from { --float-x: -0.6%; } to { --float-x: -5.4%; } } /* left only */
@keyframes shape-bottom-y { from { --float-y: -2.6%; } to { --float-y: 2.6%; } }
@keyframes shape-bottom-r { from { --float-r: 1deg; } to { --float-r: -1deg; } }
@keyframes hero-btn-in {
from { opacity: 0; transform: translateY(16px); }
}
/* ── HERO — TABLET & DESKTOP ── */
/* On bigger screens .hero-inner is the Figma frame, scaled to fit the screen
by width AND height. Everything inside is placed in cqw: 1cqw = 1% of the
frame width. To take a value from Figma: px ÷ (frame width ÷ 100) = cqw.
The rules below are shared; each frame further down only sets its numbers. */
/* Which frame a screen gets:
phone — narrower than 744px, or a short screen (e.g. a phone turned sideways)
tablet — 744–1023px wide and at least 740px tall; or 1024px+ in portrait
desktop — 1024px+ in landscape (1920px+ gets the wide desktop frame)
(width >= 744px) is the newer "range" way of writing (min-width: 744px) */
@media (width >= 744px) and (height >= 740px), (width >= 1024px) {
.hero {
container-type: inline-size;
justify-content: var(--frame-align, center);
padding: 0;
}
.hero-inner {
position: relative;
width: min(100cqw, var(--screen-h) * var(--frame-w) / var(--frame-h));
aspect-ratio: var(--frame-w) / var(--frame-h);
}
.hero-title {
position: absolute;
left: var(--title-x);
top: var(--title-y);
}
.hero-first {
margin-left: 0;
font-size: var(--alex-size);
}
.hero-last {
margin: var(--shel-gap) 0 0 var(--shel-x);
width: var(--shel-w);
}
.hero-photo {
position: absolute;
left: var(--photo-x);
top: var(--photo-y);
width: var(--photo-w);
}
.hero-actions {
position: absolute;
left: var(--btn-x);
top: var(--btn-y);
gap: var(--btn-gap);
margin-top: 0;
}
.hero .btn {
height: max(44px, var(--btn-h));
font-size: var(--btn-font);
}
.hero .btn-primary {
flex: none;
width: var(--btn1-w);
}
.hero .btn-contact {
width: var(--btn2-w);
border-width: max(1px, 0.1cqw);
}
.btn-contact-icon { display: none; }
.btn-contact-text {
position: static;
width: auto;
height: auto;
overflow: visible;
clip-path: none;
}
.hero-arrow {
position: absolute;
left: var(--arrow-x);
top: var(--arrow-y);
width: var(--arrow-w);
height: auto;
overflow: visible; /* the round line ends may poke out of the box a little */
}
}
/* iPad mini frame, 744 × 1133 — tablets 744–1023px wide (1cqw = 7.44px) */
@media (744px <= width < 1024px) and (height >= 740px) {
.hero {
--frame-w: 744;
--frame-h: 1133;
--title-x: 17.28cqw; --title-y: 59.27cqw;
--alex-size: 13.51cqw;
--shel-w: 65.16cqw; --shel-x: 0.13cqw; --shel-gap: 2.57cqw;
--photo-x: 57.08cqw; --photo-y: 37.76cqw; --photo-w: 26.13cqw;
--btn-x: 12.76cqw; --btn-y: 90.17cqw; --btn-gap: 4.66cqw;
--btn-h: 6.55cqw; --btn-font: 2.69cqw;
--btn1-w: 33.79cqw; --btn2-w: 35.86cqw;
--arrow-x: 82.76cqw; --arrow-y: 74.65cqw; --arrow-w: 4.49cqw; /* arrow-mini.svg */
}
}
/* iPad Pro 12.9" frame, 1024 × 1366 — 1024px+ in portrait (1cqw = 10.24px) */
@media (width >= 1024px) and (orientation: portrait) {
.hero {
--frame-w: 1024;
--frame-h: 1366;
--title-x: 12.47cqw; --title-y: 49.38cqw;
--alex-size: 14.63cqw;
--shel-w: 70.72cqw; --shel-x: 2.21cqw; --shel-gap: 2.41cqw;
--photo-x: 58.05cqw; --photo-y: 29.53cqw; --photo-w: 25.56cqw;
--btn-x: 20.87cqw; --btn-y: 79.27cqw; --btn-gap: 4.36cqw;
--btn-h: 5.96cqw; --btn-font: 2.34cqw;
--btn1-w: 24.78cqw; --btn2-w: 28.90cqw;
--arrow-x: 81.42cqw; --arrow-y: 64.86cqw; --arrow-w: 8.33cqw;
}
}
/* Desktop frame, 1440 × 1024 — 1024px+ in landscape (1cqw = 14.4px) */
@media (width >= 1024px) and (orientation: landscape) {
.hero {
--frame-w: 1440;
--frame-h: 1024;
--frame-align: flex-end; /* the frame sits at the bottom, so the photo touches the edge */
--title-x: 7cqw; --title-y: 26.02cqw;
--alex-size: 12.5cqw;
--shel-w: 49.73cqw; --shel-x: 0.00cqw; --shel-gap: 1.19cqw;
--photo-w: 33.92cqw;
--btn-x: 7cqw; --btn-y: 47.4cqw; --btn-gap: 2.15cqw;
--btn-h: 4.13cqw; --btn-font: 1.67cqw;
--btn1-w: 17.33cqw; --btn2-w: 20.47cqw;
--arrow-x: 36cqw; --arrow-y: 55.03cqw; --arrow-w: 20.65cqw;
}
/* On desktop the photo box is anchored to the bottom right and has its own
proportions; the shapes sit differently relative to the person */
.hero-photo {
left: auto;
top: auto;
right: 4.58cqw;
bottom: 0;
aspect-ratio: 488.5 / 763.5;
-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.hero-shape-top { left: 2.37%; top: 0; width: 57.26%; }
.hero-shape-bottom { left: 22.74%; top: 28.36%; width: 77.22%; }
.hero-person { left: -24.8%; top: 7.5%; width: 132%; }
}
/* Wide frame, 1920 × 1024 — landscape screens 1920px+ wide (1cqw = 19.2px).
Builds on the desktop frame above: only the numbers change. */
@media (width >= 1920px) and (orientation: landscape) {
.hero {
--frame-w: 1920;
--frame-h: 1024;
--title-x: 10.43cqw; --title-y: 16.50cqw;
--alex-size: 10.45cqw;
--shel-w: 43.59cqw; --shel-x: -0.07cqw; --shel-gap: 1.09cqw;
--photo-w: 28.10cqw;
--btn-x: 10.36cqw; --btn-y: 35.18cqw; --btn-gap: 1.61cqw;
--btn-h: 3.21cqw; --btn-font: 1.25cqw;
--btn1-w: 13.03cqw; --btn2-w: 15.36cqw;
--arrow-x: 31.43cqw; --arrow-y: 39.29cqw; --arrow-w: 33.57cqw; /* arrow-wide.svg */
}
.hero-photo { right: 7.43cqw; }
}
/* Skills sits behind Hero (negative margin) and slides out by --reveal
as you scroll. JS only sets --p (0…1), CSS works out the clip-path. */
.skills-section {
--p: 0;
position: relative;
z-index: 1;
height: calc(var(--screen-h) + var(--reveal));
margin-top: calc(-1 * var(--screen-h));
background: var(--orange);
border-radius: 0 0 var(--radius) var(--radius);
clip-path: inset(0 0 calc(var(--reveal) * (1 - var(--p))) 0
round 0 0 var(--radius) var(--radius));
}
/* The part of the Skills block that shows below Hero */
.skills-strip {
position: absolute;
left: 0; right: 0; bottom: 0;
height: var(--reveal);
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--gutter);
}
/* ── SKILLS (the list inside the orange strip) ── */
/* Dot size and gaps are in em, so they grow together with the text */
/* Phone: one under another, starting with HTML */
.skills {
display: flex;
flex-direction: column;
gap: 0.8em;
list-style: none;
font-weight: 800;
font-size: clamp(22px, 6.9vw, 31px); /* 27px at 390 */
line-height: 1;
color: var(--white);
}
.skills li {
display: flex;
align-items: center;
gap: 0.33em;
/* hidden until the strip has slid out far enough to show it; then it fades in
dropping a little from above (the script adds .is-in, one after another) */
opacity: 0;
translate: 0 -0.5em;
transition: opacity 0.5s ease-out, translate 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.skills li.is-in { opacity: 1; translate: 0 0; }
/* the dot before each skill */
.skills li::before {
content: '';
flex-shrink: 0;
width: 0.53em;
height: 0.53em;
border-radius: 50%;
background: currentColor;
}
/* Tablets: 2 × 2 — HTML and CSS on top, JavaScript and and More below.
Same screens as the tablet frames of the Hero. */
@media (744px <= width < 1024px) and (height >= 740px), (width >= 1024px) and (orientation: portrait) {
.skills {
display: grid;
grid-template-columns: auto auto;
gap: 0.9em 3em; /* between rows, between columns */
font-size: clamp(30px, 4vw, 34px);
}
}
/* Desktop: one row, sizes from the 1440 mockup.
The strip scales with the screen width: 16.56vw = 238px at 1440 and 318px at 1920 */
@media (width >= 1024px) and (orientation: landscape) {
.skills-section { --reveal: 16.56vw; }
.skills-strip { padding-top: 1.597vw; } /* the list sits a little below centre, as in the mockup */
.skills {
flex-direction: row;
gap: 0 3.02em;
font-size: 2.083vw; /* 30px at 1440 */
}
}
/* ── ABOUT ── */
/* Phone and tablet: the photo sits on the left and the text wraps around it,
like a picture in a book. Values from the phone mockup (390). */
.about {
padding: 64px 0 48px;
}
.about-inner {
padding-inline: var(--gutter);
}
/* Section title with the line under it — used by every section (About,
Projects, Get a Quote, Contact). The line is a 1px gradient that fades
out at both ends, same as section-line.svg, so it needs no image file. */
.section-title {
margin: 0 34px 0 18px;
padding-bottom: 18px;
background: linear-gradient(to right, transparent, var(--line) 10%, var(--line) 90%, transparent)
bottom / 100% 1px no-repeat;
font-weight: 700;
font-size: 26px;
line-height: 1;
color: var(--text);
}
.about-body {
margin-top: 20px;
}
/* keeps the section tall enough even if the text were shorter than the photo */
.about-body::after {
content: '';
display: block;
clear: both;
}
/* The photo box floats left and is as wide as the column; the text wraps
around it like a picture in a book. shape-outside is the outline the text
follows: it traces the right edge of the person (and the tag), measured from
the photo itself (redo it if you change the photo), and
shape-margin keeps a gap. Points are % of this box.
--pl / --pw: where the person starts and how wide it is (% of the column). */
.about-photo {
--pl: 2.5%;
--pw: 50%;
position: relative;
float: left;
width: 100%;
shape-outside: polygon(0 0, 33.2% 0.0%, 33.2% 4.0%, 35.1% 8.0%, 35.5% 12.0%, 34.8% 16.0%, 35.6% 20.0%, 35.3% 24.0%, 33.0% 28.0%, 32.1% 32.0%, 38.7% 35.0%, 53.3% 35.0%, 53.3% 45.0%, 45.4% 45.0%, 46.6% 48.0%, 47.6% 52.0%, 48.3% 56.0%, 48.9% 60.0%, 49.4% 64.0%, 49.8% 68.0%, 50.1% 72.0%, 50.5% 76.0%, 50.5% 80.0%, 50.6% 84.0%, 50.5% 88.0%, 50.5% 100%, 0 100%);
shape-margin: 12px;
}
/* Narrow phones: a slightly smaller photo, so the text beside it isn't too narrow */
@media (width < 380px) {
.about-photo {
--pw: 42%;
shape-outside: polygon(0 0, 28.3% 0.0%, 28.3% 4.0%, 29.9% 8.0%, 30.2% 12.0%, 29.6% 16.0%, 30.3% 20.0%, 30.1% 24.0%, 28.1% 28.0%, 27.4% 32.0%, 32.9% 35.0%, 45.1% 35.0%, 45.1% 45.0%, 38.5% 45.0%, 39.6% 48.0%, 40.4% 52.0%, 41.0% 56.0%, 41.5% 60.0%, 41.9% 64.0%, 42.3% 68.0%, 42.5% 72.0%, 42.8% 76.0%, 42.9% 80.0%, 42.9% 84.0%, 42.8% 88.0%, 42.8% 100%, 0 100%);
shape-margin: 8px;
}
}
/* "Alex" tag (SVG) at the neck/shoulder, peeking out from behind the person */
.about-tag {
position: absolute;
left: calc(var(--pl) + var(--pw) * 0.66); /* 0.66 = share of the person's width: its left end tucks behind the neck */
top: 35%;
width: calc(var(--pw) * 0.355);
height: auto;
}
/* The box is exactly the visible person (tight around them) */
.about-person {
position: relative;
z-index: 1; /* in front of the tag */
width: var(--pw);
margin-left: var(--pl);
aspect-ratio: 697 / 1120;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 79%, transparent);
mask-image: linear-gradient(to bottom, #000 79%, transparent);
}
/* Your photo file has empty space around the person, so the image is
bigger than the box and shifted: the box shows just the person */
.about-person img {
display: block;
width: 143.5%;
max-width: none;
height: auto;
margin: -10.04% 0 0 -17.65%;
}
.about-content {
font-weight: 500;
font-size: 17px;
line-height: 1.3;
color: var(--text);
}
.about-content p + p { margin-top: 1.3em; }
.accent {
font-weight: 600;
color: var(--orange-text);
}
strong.accent { font-weight: 800; } /* ExtraBold */
/* Highlighter for key phrases, used all over the site.
--marker-from: where the colour starts (66% = thin, 52% = thicker)
--marker-color: the marker's colour */
mark {
padding: 0 0.15em;
background: linear-gradient(transparent var(--marker-from, 66%), var(--marker-color, var(--yellow)) 0);
color: inherit;
-webkit-box-decoration-break: clone;
box-decoration-break: clone; /* if the text wraps, each line gets its own marker */
}
.about-content mark { font-weight: 600; }
/* ── About: entrance ──
One wave, the first time each part comes into view (the script adds .is-in;
--d is its place in the queue, so parts that come in together follow each other).
Photo rises → the Alex tag slides out from behind the person → the paragraphs
one by one → the marker is drawn under its phrase → "work:" turns orange and
ExtraBold with a little pop → the button rises, and then its arrow draws. */
.about-person {
opacity: 0;
translate: 0 6%;
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
translate 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.about-tag {
opacity: 0;
translate: -45% 0;
transition: opacity 0.35s ease-out calc(var(--d, 0s) + 0.45s),
translate 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) calc(var(--d, 0s) + 0.45s);
}
.about-photo.is-in .about-person,
.about-photo.is-in .about-tag { opacity: 1; translate: 0 0; }
.about-content p,
.about-btn {
opacity: 0;
translate: 0 14px;
transition: opacity 0.6s ease-out var(--d, 0s),
translate 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
/* the button keeps its usual hover transitions as well */
.about-btn {
transition: opacity 0.6s ease-out var(--d, 0s),
translate 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease,
transform 0.25s ease, box-shadow 0.25s ease;
}
.about-content p.is-in,
.about-cta.is-in .about-btn { opacity: 1; translate: 0 0; }
/* the marker is drawn from left to right */
.about-content mark {
background-size: 0% 100%;
background-repeat: no-repeat;
transition: background-size 0.8s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d, 0s) + 0.5s);
}
.about-content p.is-in mark { background-size: 100% 100%; }
/* "work:" starts as plain text, then turns orange and ExtraBold with a little pop.
It sits in a box as wide as its bold version (the hidden copy after it), so the
rest of the line doesn't shift while the word thickens. */
.about-content .accent { display: inline-grid; font-weight: 500; color: var(--text); }
.about-content .accent > span,
.about-content .accent::after { grid-area: 1 / 1; justify-self: center; }
.about-content .accent::after { content: attr(data-word); font-weight: 800; visibility: hidden; }
.about-content .accent > span {
transition: color 0.4s ease-out calc(var(--d, 0s) + 0.6s),
font-weight 0.4s ease-out calc(var(--d, 0s) + 0.6s);
}
.about-content p.is-in .accent > span {
color: var(--orange-text);
font-weight: 800;
animation: work-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0s) + 0.6s) both;
}
@keyframes work-pop { 0%, 100% { scale: 1; } 45% { scale: 1.16; } }
.about-cta {
clear: both; /* always below the photo */
margin-top: 32px;
}
/* holds the button and the arrow */
.about-cta-inner {
position: relative;
display: block;
}
/* Phone: full-width button, text shrinks a little on narrow screens so it fits */
.about-btn {
width: 100%;
padding-inline: 16px;
font-size: clamp(14px, 4.4vw, 18px);
}
.about-arrow { display: none; } /* hidden on phones */
/* iPad mini (744–799px): bigger photo, the text runs down its right side
along the outline. Under the photo: the button with the long tablet
arrow, centred together; the arrow leads from the end of the text. */
@media (744px <= width < 800px) and (height >= 740px) {
.about-photo {
--pw: 40%;
shape-outside: polygon(0 0, 27.0% 0.0%, 27.0% 4.0%, 28.6% 8.0%, 28.9% 12.0%, 28.3% 16.0%, 29.0% 20.0%, 28.8% 24.0%, 26.9% 28.0%, 26.2% 32.0%, 31.5% 35.0%, 43.1% 35.0%, 43.1% 45.0%, 36.8% 45.0%, 37.8% 48.0%, 38.6% 52.0%, 39.1% 56.0%, 39.6% 60.0%, 40.0% 64.0%, 40.4% 68.0%, 40.6% 72.0%, 40.9% 76.0%, 40.9% 80.0%, 41.0% 84.0%, 40.9% 88.0%, 40.9% 100%, 0 100%);
shape-margin: 20px;
}
.about-cta {
margin-top: 24px;
text-align: center;
}
/* the button and the arrow side by side, centred as one group */
.about-cta-inner {
display: inline-flex;
align-items: flex-end;
gap: 12px;
}
.about-btn {
width: auto;
padding-inline: 28px;
font-size: 18px;
}
.about-arrow {
display: block;
width: 264px;
height: auto;
margin-bottom: 6px; /* the arrowhead points at the middle of the button */
}
.about-arrow--short { display: none; }
}
/* Bigger tablets (800px+): like desktop — photo on the left; on the right
the text and, right under it, the button with the arrow */
@media (800px <= width < 1024px) and (height >= 740px), (width >= 1024px) and (orientation: portrait) {
.about-body {
display: grid;
grid-template-columns: 36% 1fr;
grid-template-rows: 1fr auto auto 1fr; /* text + button centred next to the photo */
column-gap: 7%; /* room for the tag, which sticks out to the right of the photo */
margin-top: 32px;
}
.about-body::after { display: none; } /* not needed in the grid */
.about-photo {
--pl: 0%;
--pw: 100%;
grid-row: 1 / -1;
align-self: center;
float: none;
}
.about-content {
grid-column: 2;
grid-row: 2;
}
.about-cta {
grid-column: 2;
grid-row: 3;
/* space between the text and the button; the text + button pair stays
centred next to the photo, so a bigger gap lifts the text and lowers
the button by half each. Keeps the arrow clear of the last line. */
margin-top: 60px;
}
.about-cta-inner { display: inline-block; }
.about-btn {
width: auto;
padding-inline: 24px;
font-size: 16px;
}
.about-arrow {
display: block;
position: absolute;
left: calc(100% + 20px);
bottom: 8px;
width: 80px;
height: auto;
}
.about-arrow--long { display: none; }
}
/* Desktop (mockup 1440): two columns, everything scales with the screen width
(px from the mockup ÷ 14.4 = vw) */
@media (width >= 1024px) and (orientation: landscape) {
.about {
padding: 8.17vw 0 4.17vw;
}
.about-inner {
padding-inline: 4.10vw;
}
.section-title {
margin: 0;
padding: 0 0 1.69vw 3.61vw;
font-size: 2.08vw;
}
.about-body {
display: grid;
grid-template-columns: 47.65vw 1fr;
grid-template-rows: 1fr auto auto 1fr; /* text + button centred next to the photo */
gap: 0;
margin-top: 3.19vw;
}
.about-body::after { display: none; } /* not needed in the grid */
.about-photo {
grid-row: 1 / -1;
align-self: center;
float: none;
width: 31.97vw;
margin: 0 0 0 4.59vw;
}
.about-photo {
--pl: 0%;
--pw: 100%;
}
.about-content {
grid-column: 2;
grid-row: 2;
max-width: 36.11vw;
font-size: max(16px, 1.35vw);
line-height: 1.11;
}
.about-content p + p { margin-top: 1.11em; }
.about-cta {
grid-column: 2;
grid-row: 3;
margin-top: 3.61vw;
margin-bottom: 0.56vw; /* text + button sit slightly above centre, as in the mockup */
}
.about-cta-inner {
display: inline-block;
margin-left: 0.35vw;
}
.about-btn {
width: auto;
height: max(44px, 3.01vw);
padding-inline: 1.97vw;
font-size: max(16px, 1.25vw);
}
.about-arrow {
display: block;
position: absolute;
left: calc(100% + 2.78vw);
bottom: 0.60vw;
width: 6.88vw;
height: auto;
}
.about-arrow--long { display: none; }
}
/* ── PROJECTS ── */
/* Phone: cards one under another (to be tuned with the phone mockup) */
.projects {
padding: 48px 0;
}
.projects-inner {
padding-inline: var(--gutter);
}
.projects-list {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 24px;
list-style: none;
}
/* The card is a button (it opens a window, not another page).
Sizes inside are in cqw — % of the card width — so they scale with it. */
/* the cards' corner radius lives on the , so its focus ring (below) can use it too */
.projects-list > li { --card-r: 32px; border-radius: var(--card-r); }
.project-card {
position: relative;
display: block;
width: 100%;
aspect-ratio: 365 / 283;
padding: 0;
border: 0;
border-radius: var(--card-r);
/* Rounded corners cut the whole card as ONE picture. With overflow: hidden the
browser cut each layer on its own, and at the soft edge of the corner a little
of the screenshot showed through the band and the Concept tag: a thin dark line.
The mask makes the browser draw the card first and cut it after. */
clip-path: inset(0 round var(--card-r));
-webkit-mask-image: linear-gradient(#000, #000);
mask-image: linear-gradient(#000, #000);
background: var(--orange); /* empty cards stay plain orange for now */
container-type: inline-size;
font: inherit;
color: var(--text);
text-align: left;
cursor: pointer;
isolation: isolate; /* helps the rounded corners clip the zoomed screenshot in every browser */
}
/* The cut above would hide the card's own focus ring (it's drawn outside the card),
so the ring is drawn on the around it instead. Same look as everywhere else. */
.project-card:focus-visible { outline: none; }
.projects-list > li:has(> .project-card:focus-visible) {
outline: 2px solid var(--focus);
outline-offset: 4px;
}
.project-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Yellow "Concept" tag in the corner. The card's cut (see .project-card) rounds its
corner, so the tag has no rounded corner of its own: two soft edges on top of each
other let the dark screenshot show through as a hairline. */
.project-tag {
position: absolute;
top: 0;
left: 0;
z-index: 2;
padding: 2.4cqw 6cqw 2.4cqw 15cqw;
background: var(--yellow);
clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%); /* slightly slanted right edge */
font-weight: 600;
font-size: clamp(12px, 5.4cqw, 22px);
line-height: 1;
color: var(--text);
}
/* Orange 40% tint over the whole screenshot */
.project-overlay {
position: absolute;
inset: 0;
background: rgb(246 149 64 / 0.4);
opacity: 0;
transition: opacity 0.4s ease;
}
.project-caption {
position: absolute;
left: 7cqw;
right: 7cqw;
bottom: 6cqw;
isolation: isolate;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 4cqw;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Solid orange behind the text, fading out above it. It follows the
caption's real height, so the text never sits on the busy screenshot. */
.project-caption::before {
content: '';
position: absolute;
inset: -24cqw -7cqw -6cqw;
z-index: -1;
background: linear-gradient(to top, rgb(246 149 64 / 0.97) calc(100% - 24cqw), rgb(246 149 64 / 0));
}
.project-name {
display: block;
font-weight: 700;
font-size: clamp(15px, 6.4cqw, 28px);
line-height: 1.1;
}
.project-desc {
display: block;
margin-top: 0.4em;
font-weight: 600;
font-size: clamp(12px, 3.9cqw, 17px);
line-height: 1.25;
}
/* Small cards (narrow tablets): just the name. Placed after .project-desc,
otherwise that rule's display: block would win. */
@container (width < 240px) {
.project-desc { display: none; }
}
/* round arrow: "this opens" */
.project-open {
flex-shrink: 0;
display: grid;
place-items: center;
width: clamp(32px, 11cqw, 48px);
aspect-ratio: 1;
border-radius: 50%;
background: var(--white);
color: var(--text);
}
.project-open svg { width: 45%; height: 45%; }
/* Mouse: the effect appears on hover. Keyboard: on focus. */
@media (hover: hover) {
.project-card:hover img { transform: scale(1.05); }
.project-card:hover .project-overlay { opacity: 1; }
.project-card:hover .project-caption { opacity: 1; transform: none; }
}
.project-card:focus-visible .project-overlay { opacity: 1; }
.project-card:focus-visible .project-caption { opacity: 1; transform: none; }
/* Touch screens can't hover, so the name and the arrow are always shown */
@media (hover: none) {
.project-overlay,
.project-caption { opacity: 1; transform: none; }
}
/* Tablets: three in a row, like desktop */
@media (744px <= width < 1024px) and (height >= 740px), (width >= 1024px) and (orientation: portrait) {
.projects-list {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 28px;
padding-inline: 18px;
}
.projects-list > li { --card-r: 28px; }
}
/* Desktop (mockup 1440): px ÷ 14.4 = vw */
@media (width >= 1024px) and (orientation: landscape) {
.projects {
padding: 4.17vw 0;
}
.projects-inner {
padding-inline: 4.10vw;
}
.projects-list {
grid-template-columns: repeat(3, 1fr);
gap: 3.96vw;
margin-top: 2.64vw;
padding-inline: 3.89vw;
}
.projects-list > li { --card-r: 4.86vw; }
}
/* ── SCROLLBAR (computers only) ── */
/* Phones and tablets show a thin scrollbar only while you swipe,
so this is only for mouse/trackpad screens */
@media (hover: hover) and (pointer: fine) {
/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
border: 3px solid transparent; /* makes the pill thinner than the track */
border-radius: 999px;
background: var(--line) padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--orange); }
/* Firefox doesn't know ::-webkit-scrollbar, so it gets the standard properties */
@supports not selector(::-webkit-scrollbar) {
html {
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
}
}
/* ── Projects: entrance ──
The first time the cards come into view they rise one after another (the script
adds .is-in and --d, the same as About); then the Concept tag slides into its corner. */
.projects-list > li {
opacity: 0;
translate: 0 32px;
scale: 0.97;
transition: opacity 0.6s ease-out var(--d, 0s),
translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
scale 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.projects-list > li.is-in { opacity: 1; translate: 0 0; scale: 1; }
.projects-list .project-tag {
translate: -101% 0;
transition: translate 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0s) + 0.45s);
}
.projects-list > li.is-in .project-tag { translate: 0 0; }
/* ── PROJECT WINDOW (dialog) ── */
/*