/* ============================================================================= Artsons Corp. — styles.css DIRECTION CONTRACT (see DESIGN.md) THESIS · An engineer's blueprint that came to life. A working construction document — grid, thin rule-lines, mono labels, a ledger of real contracts — refusing the stock hard-hat + glass-skyline hero. WORLD · Charcoal/ink blueprint grounds + off-white reading plates. Maroon #660033 = the one dominant accent; royal blue #4169E1 = drafting line-work + links. Single typeface: Sora throughout — hierarchy comes from weight, size, tracking, and color, not a second family. STORY · Infrastructure we build -> the numbers -> the ledger -> institutions -> capability/character/team/credentials -> request a proposal. SIGNATURE · Fixed bottom liquid-glass nav + cinematic hero video. ========================================================================== */ /* ---------- Fonts: Sora self-hosted — single typeface, no external fonts ---- */ @font-face { font-family:"Sora"; font-weight:400; font-style:normal; font-display:swap; src:url("../assets/fonts/Sora-Regular.ttf") format("truetype"); } @font-face { font-family:"Sora"; font-weight:500; font-style:normal; font-display:swap; src:url("../assets/fonts/Sora-Medium.ttf") format("truetype"); } @font-face { font-family:"Sora"; font-weight:600; font-style:normal; font-display:swap; src:url("../assets/fonts/Sora-SemiBold.ttf") format("truetype"); } @font-face { font-family:"Sora"; font-weight:700; font-style:normal; font-display:swap; src:url("../assets/fonts/Sora-Bold.ttf") format("truetype"); } @font-face { font-family:"Sora"; font-weight:800; font-style:normal; font-display:swap; src:url("../assets/fonts/Sora-ExtraBold.ttf") format("truetype"); } /* ============================ DESIGN TOKENS =============================== */ :root{ /* Brand (pinned) */ --maroon:#660033; --maroon-soft:#8a1a52; --maroon-lift:#da6aa4; /* lightened maroon for text/lines on dark (AA on charcoal + ink) */ --blue:#4169E1; --blue-soft:#6f8fe8; --blue-line:#5c7fe0; /* drafting lines on dark grounds */ --charcoal:#1F2933; --ink:#141B22; --ink-deep:#0d1219; --offwhite:#F7F7F5; --paper:#ffffff; /* Semantic — light surfaces */ --bg:var(--offwhite); --text:#1c242d; --text-dim:#55606c; /* >=4.5:1 on off-white */ --hair:#e2e2df; /* hairline rule on light */ --hair-strong:#d2d2ce; /* Semantic — dark surfaces */ --on-dark:#eef1f5; --on-dark-dim:#a9b4c0; /* >=4.5:1 on charcoal */ --hair-dark:rgba(255,255,255,.10); /* Status — one green scale (same hue, three tints), blue + maroon reuse brand tokens */ --ok:#2f9e6f; /* completed base — pill fill/border */ --ok-ink:#1c7d57; /* completed text on light grounds */ --ok-lift:#5fd6a2; /* completed text on dark grounds */ --ongoing:var(--blue); --design:var(--maroon-soft); --panel-deep:#1b1f24; /* lightbox panel / tooltip ground */ /* Type */ --sans:"Sora",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; /* Single-typeface system: everything is Sora. The --mono token is kept as an alias so existing label styles keep working; hierarchy comes from weight, size, tracking, and color — not a second family. */ --mono:var(--sans); /* Rhythm */ --wrap:1200px; --gutter:clamp(1.25rem,5vw,4rem); --section-y:clamp(4.5rem,9vw,8rem); --radius:16px; --radius-sm:10px; --ease:cubic-bezier(.16,.84,.24,1); /* exponential-ish ease-out */ --nav-h:74px; } /* ================================ RESET ================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;font-family:var(--sans);font-weight:400; background:var(--bg);color:var(--text); font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:clip; } img,svg{max-width:100%;display:block} a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} button{font:inherit;color:inherit;cursor:pointer;background:none;border:none} h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.06;letter-spacing:-.02em} p{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:4px} .dark :focus-visible{outline-color:var(--blue-soft)} /* Skip link */ .skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--maroon); color:#fff;padding:.6rem 1rem;border-radius:8px;font-weight:600;transition:top .2s} .skip:focus{top:12px;text-decoration:none} /* ============================== PRIMITIVES =============================== */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--section-y)} section[id]{scroll-margin-top:1.25rem} /* Folder-deck: Services → FAQ stack as sticky cards (all viewports). Each card fits within one screen so pinning never clips its content. */ .stack{position:relative} .stack > section{ position:sticky;top:0;min-height:100svh; /* Top-align every card so all titles sit at the SAME distance from the card top (centering gave shorter cards a bigger, uneven gap above the title). */ display:flex;flex-direction:column;justify-content:flex-start; border-radius:clamp(22px,4vw,34px) clamp(22px,4vw,34px) 0 0; box-shadow:0 -24px 64px -28px rgba(0,0,0,.6); } .stack > section:first-child{box-shadow:0 -24px 64px -30px rgba(0,0,0,.4)} /* Consistent top offset for the title on every card; trimmed bottom so the card isn't bottom-heavy now that content is anchored to the top. */ .stack > section{padding-block:clamp(3rem,11vh,5.5rem) clamp(1.75rem,5vh,3.25rem)} .stack > section .section-head{margin-bottom:clamp(1.5rem,4vw,3.25rem)} /* Mobile/small: compress deck cards so each fits one screen (no clip when pinned) */ @media (max-width:820px){ /* Consistent top offset, trimmed bottom (top-align comes from the base rule). */ .stack > section{padding-block:clamp(1.75rem,5vw,3rem) clamp(1.15rem,3.5vw,2rem)} .stack > section .section-head{margin-bottom:1rem} .section-head .h2{font-size:clamp(1.55rem,1.1rem + 2vw,2rem)} .stack .lede{margin-top:.7rem;font-size:.98rem} .stack .svc__grid{grid-template-columns:1fr 1fr;gap:.6rem} .stack .svc,.stack .val{padding:1.15rem} .stack .svc h3,.stack .val h4{font-size:1.02rem;margin-top:.55rem} .stack .svc p,.stack .val p{font-size:.86rem;margin-top:.4rem} .stack .val__grid{grid-template-columns:1fr 1fr;gap:.6rem} .stack .team__grid{grid-template-columns:1fr 1fr;gap:.7rem} .stack .member{padding:1rem} .stack .avatar{width:100px;height:100px;font-size:1.45rem} .stack .cert__grid{grid-template-columns:1fr 1fr;gap:.7rem} .stack .cert__grid{gap:.7rem} .stack .cert__body{padding:1.05rem 1.05rem 1rem} .stack .about__grid{gap:1.3rem} .stack .mv{gap:1rem} .stack .threec__item{padding:.85rem 1rem} .stack .threec__item h4{font-size:.98rem} .stack .threec__item p{font-size:.83rem;line-height:1.45} /* services + values: shave the extra ~30px, keep them identical */ .stack .svc,.stack .val{padding:.9rem} .stack .svc__grid,.stack .val__grid{gap:.5rem} .stack .svc p,.stack .val p{font-size:.82rem;line-height:1.45} /* about: shave the extra ~70px */ .stack .mv__block p{font-size:.9rem;line-height:1.5} .stack .mv{gap:.85rem} .stack .about__grid{gap:1rem} } /* Tall phones (>=800px, i.e. essentially every modern phone that keeps the deck): the card has headroom, so grow the type and spacing well past the compact fit-to-screen sizes for a more comfortable, readable deck. */ @media (max-width:820px) and (min-width:390px) and (min-height:840px){ .stack > section .section-head{margin-bottom:clamp(1rem,3vh,1.35rem)} .stack .lede{font-size:1rem;margin-top:.7rem;line-height:1.5} .stack .svc,.stack .val{padding:.95rem} .stack .svc__grid,.stack .val__grid{gap:.55rem} .stack .svc h3,.stack .val h4{font-size:1.06rem;margin-top:.45rem} .stack .svc p,.stack .val p{font-size:.88rem;line-height:1.45} .stack .about__grid{gap:.95rem} .stack .mv{gap:.9rem} .stack .mv__block p{font-size:.92rem;line-height:1.5} .stack .threec{gap:.55rem} .stack .threec__item{padding:.8rem .95rem} .stack .threec__item h4{font-size:1rem} .stack .threec__item p{font-size:.86rem;line-height:1.45} .stack .team__grid{gap:.75rem} .stack .member{padding:.95rem} .stack .faq__q{font-size:1rem} .stack .faq__a-inner{font-size:.88rem;line-height:1.5} .stack .cert__body{padding:1.05rem} } /* Short-but-still-decked screens (669–720px tall): compress the pinned deck cards so their content fits one screen. iPhone 7 and shorter (<=667px) drop the deck entirely (see the normal-scroll block below), so this tier starts above them. */ @media (max-width:820px) and (min-height:668px) and (max-height:720px){ /* Give the title breathing room above it; scale with height so shorter phones (where the tallest cards nearly fill the screen) tighten it back and never clip. */ .stack > section{padding-block:clamp(1.2rem,6svh,2.75rem) clamp(.8rem,2vh,1rem)} .stack > section .section-head{margin-bottom:.45rem} .section-head .h2{font-size:clamp(1.4rem,1.05rem + 1.9vw,1.75rem)} .stack .lede{margin-top:.4rem;font-size:.94rem;line-height:1.4} .stack .svc__grid,.stack .val__grid,.stack .team__grid,.stack .about__grid,.stack .threec,.stack .cert__grid{margin-top:.9rem} .stack .svc,.stack .val{padding:.58rem .62rem} .stack .svc__grid,.stack .val__grid{gap:.42rem} .stack .svc h3,.stack .val h4{font-size:1.02rem;margin-top:.28rem} .stack .svc p,.stack .val p{font-size:.82rem;line-height:1.36;margin-top:.26rem} .stack .about__grid{gap:.6rem} .stack .mv{gap:.45rem} .stack .mv__block p{font-size:.85rem;line-height:1.4;margin-top:.28rem} .stack .threec{gap:.4rem} .stack .threec__item{padding:.48rem .72rem} .stack .threec__item h4{font-size:.98rem} .stack .threec__item p{font-size:.8rem;line-height:1.38} .stack .avatar{width:78px;height:78px;font-size:1.2rem} .stack .member{padding:.75rem} .stack .team__grid{gap:.6rem} .stack .cert__body{padding:.85rem} .stack .cert__code{font-size:1.08rem} .stack .faq__list{margin-top:.9rem} .stack .faq__q{padding:.85rem 0;font-size:.98rem;gap:1rem} .stack .faq__q .ico{width:23px;height:23px} .stack .faq__a-inner{font-size:.87rem;line-height:1.5} } /* iPhone 7 and shorter (<=667px tall): a full-screen deck card can't hold a section without cramping, so drop the folder-deck here and let the sections scroll normally at comfortable sizes (they inherit the roomy <=820px mobile styles above). */ @media (max-width:820px) and (max-height:667px){ .stack{position:static} .stack > section, .stack > section:first-child{ position:static;min-height:0; justify-content:flex-start; border-radius:0;box-shadow:none; /* flatten: no stacked-card look */ padding-block:clamp(2.5rem,8vw,3.5rem); /* normal section rhythm */ } .stack > section .section-head{margin-bottom:clamp(1.1rem,4vw,1.6rem)} /* Comfortable reading sizes: the deck's cramped ~13px type was only needed to fit a card on one screen. It scrolls now, so restore near-site-normal body sizes. */ .stack .lede{font-size:1rem;line-height:1.55} .stack .svc p,.stack .val p{font-size:.94rem;line-height:1.55} .stack .mv__block p{font-size:.96rem;line-height:1.6} .stack .threec__item p{font-size:.9rem;line-height:1.5} .stack .threec__item h4{font-size:1.02rem} .stack .faq__a-inner{font-size:.94rem;line-height:1.6} .stack .svc,.stack .val{padding:1.05rem} .stack .svc__grid,.stack .val__grid{gap:.65rem} /* Subtle divider so adjacent flat sections still read as separate. */ .stack > section + section{border-top:1px solid var(--hairline,rgba(120,130,150,.14))} } .dark{background:var(--charcoal);color:var(--on-dark)} .dark.deep{background:var(--ink)} .eyebrow{ font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--maroon);display:inline-flex;align-items:center;gap:.55rem; } .dark .eyebrow{color:var(--maroon-lift)} .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7} .h2{font-size:clamp(1.85rem,1.2rem + 2.6vw,3rem);letter-spacing:-.03em;max-width:22ch} .lede{margin-top:1rem;max-width:60ch;color:var(--text-dim);font-size:1.075rem} .dark .lede{color:var(--on-dark-dim)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .section-head{margin-bottom:clamp(2rem,4vw,3.25rem)} .section-head .h2{margin-top:0} /* Dark grounds: flat, formal — no decorative grid */ .blueprint{position:relative;isolation:isolate} /* Buttons */ .btn{ display:inline-flex;align-items:center;gap:.55rem; padding:.85rem 1.4rem;border-radius:999px;font-weight:600;font-size:.98rem; letter-spacing:-.01em;transition:transform .18s var(--ease),background .18s,box-shadow .18s,border-color .18s; min-height:48px;white-space:nowrap; } .btn:hover{text-decoration:none;transform:translateY(-2px)} .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none} .btn:disabled:hover{transform:none} .btn:active{transform:translateY(0)} .btn-primary{background:var(--maroon);color:#fff;box-shadow:0 10px 24px -10px rgba(102,0,51,.85)} .btn-primary:hover{background:var(--maroon-soft);box-shadow:0 16px 30px -12px rgba(102,0,51,.9)} .btn-outline{border:2px solid var(--blue);color:var(--blue-soft);background:transparent} .btn-outline:hover{background:var(--blue);border-color:var(--blue);color:#fff} .btn-ghost{border:1.5px solid var(--hair-strong);color:var(--text)} .dark .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--on-dark)} .dark .btn-ghost:hover{border-color:var(--on-dark);background:rgba(255,255,255,.05)} .btn svg{width:18px;height:18px} /* Status pills */ .status{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono); font-size:.68rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; padding:.28rem .6rem;border-radius:999px;border:1px solid transparent} .status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .status-completed{color:var(--ok-ink);background:rgba(47,158,111,.12);border-color:rgba(47,158,111,.28)} .status-ongoing{color:#2f52c9;background:rgba(65,105,225,.12);border-color:rgba(65,105,225,.28)} .status-design{color:var(--maroon-soft);background:rgba(138,26,82,.1);border-color:rgba(138,26,82,.28)} .dark .status-completed{color:var(--ok-lift)}.dark .status-ongoing{color:var(--blue-soft)}.dark .status-design{color:var(--maroon-lift)} /* Reveal-on-scroll */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-delay="1"]{transition-delay:.08s} .reveal[data-delay="2"]{transition-delay:.16s} .reveal[data-delay="3"]{transition-delay:.24s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ============================ TOP LOGO BAR ============================== */ .topbar{position:absolute;top:0;left:0;right:0;z-index:40;padding-top:clamp(1.1rem,2.5vw,1.9rem)} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem} .topbar__logo{height:clamp(40px,5.5vw,56px);width:auto} .topbar__badge{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono); font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0} .topbar__badge svg{width:18px;height:18px;color:var(--maroon-lift);flex:none} .topbar__badge.is-clickable{cursor:pointer;transition:color .25s ease,opacity .25s ease;border-radius:6px} .topbar__badge.is-clickable:hover,.topbar__badge.is-clickable:focus-visible{color:var(--maroon-lift);opacity:1;outline:none} .topbar__badge.is-clickable:hover svg,.topbar__badge.is-clickable:focus-visible svg{color:#fff} .topbar__badge.is-clickable:focus-visible{outline:2px solid var(--maroon-lift);outline-offset:3px} @media (max-width:520px){.topbar__badge{font-size:.63rem;letter-spacing:.05em;gap:.4rem}.topbar__badge svg{width:16px;height:16px}} @media (max-width:360px){.topbar__badge span{display:none}} /* ================================ HERO ================================= */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column; justify-content:center;overflow:hidden;color:var(--on-dark); background:var(--ink) url("../assets/video/hero-poster.jpg") center/cover no-repeat; padding-top:clamp(6.5rem,13vh,8.5rem);padding-bottom:clamp(84px,11vh,118px)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(90% 60% at 18% 12%,rgba(102,0,51,.28),transparent 60%);z-index:1} /* Hero background video (replaces the blueprint line-scape). The poster is the hero's own background (instant paint); the video fades in on top once it's actually playing, so there's never a blank or a hard pop. JS loads the right-sized clip after the page settles and skips it on data-saver / slow / reduced-motion. */ .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; opacity:0;transition:opacity .8s var(--ease)} .hero__video.is-playing{opacity:1} .hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(100deg,rgba(9,12,18,.9) 0%,rgba(9,12,18,.6) 44%,rgba(9,12,18,.26) 100%), linear-gradient(to top,rgba(9,12,18,.62),transparent 48%), linear-gradient(to bottom,rgba(9,12,18,.5),transparent 20%)} .hero__inner{position:relative;z-index:5;display:flex;align-items:flex-start; padding-top:clamp(.5rem,2vh,1.5rem)} .hero__copy{max-width:40rem} .hero h1{font-size:clamp(2.15rem,1.15rem + 3.2vw,3.6rem);font-weight:700;letter-spacing:-.03em; line-height:1.04} .hero h1 em{font-style:normal;color:var(--maroon-lift)} .hero__sub{margin-top:1.2rem;font-size:clamp(1rem,.96rem + .35vw,1.13rem);color:#fff; max-width:50ch;line-height:1.55} .hero__cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.85rem} /* ============================ TRACK RECORD ============================= */ .stats{border-top:1px solid var(--hair-dark)} .stats__grid{display:grid;grid-template-columns:1fr;gap:1px; background:var(--hair-dark);border:1px solid var(--hair-dark);border-radius:var(--radius);overflow:hidden} @media (min-width:640px){.stats__grid{grid-template-columns:repeat(3,1fr)}} .stat{background:var(--charcoal);padding:clamp(1.5rem,3vw,2.4rem)} .stat__fig{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums; font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);letter-spacing:-.04em;color:var(--on-dark);line-height:1} .stat__fig .u{color:var(--maroon-lift)} .stat__fig--accent{color:var(--maroon-lift)} .stat__label{margin-top:.7rem;color:var(--on-dark-dim);font-size:.95rem;max-width:20ch} .stats__note{margin-top:1.3rem;font-family:var(--sans);font-size:.8rem;letter-spacing:.04em; color:var(--on-dark-dim);opacity:.85} /* ============================== PROJECTS =============================== */ .projects{background:var(--offwhite)} .proj__head{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end} /* Featured wheel */ .wheel{margin-top:clamp(1.8rem,3vw,2.6rem);position:relative} /* Snapping is handled in JS (settle to nearest card) — a single mechanism that centers 1 card on mobile and left-aligns 3 on desktop, with no CSS-vs-JS conflict. */ .wheel__track{display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth; padding:18px 4px 46px;margin-bottom:-22px;scrollbar-width:none;-ms-overflow-style:none} .wheel__track::-webkit-scrollbar{display:none} @media (pointer:fine){.wheel__track{cursor:grab}} .wheel__track.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none} .wheel__track img,.wheel__track svg{-webkit-user-drag:none} /* Full-bleed photo card: image fills the card, text overlaid on a bottom gradient */ .wheel__card{flex:0 0 100%;position:relative;overflow:hidden;cursor:pointer; aspect-ratio:3/4;width:100%;background:var(--charcoal);border:none;border-radius:20px;text-align:left; -webkit-backface-visibility:hidden;backface-visibility:hidden; box-shadow:0 12px 26px -14px rgba(28,36,45,.4),0 4px 9px -6px rgba(28,36,45,.28); transition:box-shadow .25s var(--ease)} .wheel__card:hover{box-shadow:0 20px 38px -18px rgba(8,11,16,.5),0 8px 16px -8px rgba(8,11,16,.38)} .wheel__cover{position:absolute;inset:0;overflow:hidden;border-radius:20px;background:var(--charcoal)} .wheel__cover img,.wheel__cover svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* Hover photo-cycle: two stacked covers crossfade between the project's photos. */ .wheel__photo{transition:opacity .5s var(--ease)} @media (prefers-reduced-motion:reduce){.wheel__photo{transition:none}} .wheel__shade{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:20px; background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 22%,rgba(0,0,0,.3) 46%,rgba(0,0,0,.06) 62%,transparent 76%); -webkit-backdrop-filter:blur(18px) saturate(1.12);backdrop-filter:blur(18px) saturate(1.12); -webkit-mask-image:linear-gradient(to top,#000 0%,#000 34%,transparent 64%); mask-image:linear-gradient(to top,#000 0%,#000 34%,transparent 64%)} .wheel__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem 1.3rem; display:flex;flex-direction:column;align-items:flex-start;gap:.4rem} .wheel__name{color:#fff;font-weight:600;font-size:1.08rem;line-height:1.18;letter-spacing:-.01em; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* clamp long titles on the card; full title shows in the viewer */ .wheel__loc{color:rgba(255,255,255,.82);font-size:.85rem;line-height:1.35} /* Status pill on cards — same colored-pill language as the table/panel (mono, uppercase, coloured dot + text), tinted per status and tuned to stay legible over photos with a stronger backdrop, blur and shadow. */ .wheel__chip{display:inline-flex;align-items:center;gap:.4rem;margin-top:.2rem;white-space:nowrap; font-family:var(--mono);font-weight:600;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase; padding:.3rem .62rem;border-radius:999px;border:1px solid transparent; -webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3); box-shadow:0 3px 12px -4px rgba(0,0,0,.55)} /* While a card is spinning in the coverflow, promote it to its own compositor layer and drop the (expensive) backdrop blurs — repainting a blur every frame of a 3D rotation is the main source of carousel stutter on mobile. */ .wheel__card.cf-spin{will-change:transform,opacity} .wheel__card.cf-spin .wheel__shade,.wheel__card.cf-spin .wheel__chip,.wheel__card.cf-spin .wheel__act{-webkit-backdrop-filter:none;backdrop-filter:none} .wheel__chip .wheel__dot{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor} /* Corner action cluster on each featured card: Save (all photos) + Share */ .wheel__actions{position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:8px} .wheel__act{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:none;cursor:pointer;color:#fff; background:rgba(10,14,20,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .2s var(--ease),transform .15s var(--ease)} .wheel__act:hover{background:rgba(10,14,20,.6)} .wheel__act:active{transform:scale(.9)} .wheel__act:focus-visible{outline:2px solid #fff;outline-offset:2px} .wheel__act svg{width:17px;height:17px} .wheel__chip.status-completed{color:var(--ok-lift);background:rgba(22,62,45,.6);border-color:rgba(95,214,162,.35)} .wheel__chip.status-ongoing{color:#9db8ff;background:rgba(26,42,90,.6);border-color:rgba(157,184,255,.35)} .wheel__chip.status-design{color:#f0a6cb;background:rgba(72,22,50,.6);border-color:rgba(240,166,203,.35)} /* Reveal-on-focus: the card rests as a clean photo; the shade, name/details and action icons fade (and slide) in on hover (desktop) or on the settled card (mobile, .is-live), and hide again while sliding. */ .wheel__shade{opacity:0;transition:opacity .4s var(--ease)} .wheel__actions{opacity:0;transform:translateY(-5px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .wheel__body{opacity:0;transform:translateY(12px);transition:opacity .42s var(--ease),transform .42s var(--ease)} .wheel__card:hover .wheel__shade,.wheel__card:focus-within .wheel__shade,.wheel__card.is-live .wheel__shade{opacity:1} .wheel__card:hover .wheel__actions,.wheel__card:focus-within .wheel__actions,.wheel__card.is-live .wheel__actions, .wheel__card:hover .wheel__body,.wheel__card:focus-within .wheel__body,.wheel__card.is-live .wheel__body{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ .wheel__shade,.wheel__actions,.wheel__body{transition:none;transform:none} } .wheel__pager{display:flex;align-items:center;justify-content:center;gap:.65rem;margin-top:1rem} .wheel__arrow{display:none} /* ledger paginator arrows only — the ledger renders these hidden; featured wheel uses the glass edge arrows below */ .wheel__arrow:hover{border-color:var(--maroon);color:var(--maroon)} .wheel__arrow svg{width:16px;height:16px} /* Edge arrows on the featured wheel — same frosted-white nav buttons as the lightbox photo viewer (.lb__nav), floated over the outer cards at each end (the container, not the cards, holds them, so they stay put while cards spin in the coverflow). A soft shadow keeps them legible over bright photos, where the lightbox's dark backdrop isn't. */ .wheel__arrow--edge{display:grid;place-items:center;position:absolute; top:calc(50% - 14px);transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%; color:#fff;cursor:pointer;border:none;background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); box-shadow:0 2px 12px rgba(0,0,0,.38);transition:background .2s,transform .15s} .wheel__arrow--prev{left:16px} .wheel__arrow--next{right:16px} .wheel__arrow--edge svg{width:22px;height:22px} .wheel__arrow--edge:hover{color:#fff;background:rgba(255,255,255,.26)} .wheel__arrow--edge:active{transform:translateY(-50%) scale(.93)} .wheel__arrow--edge:focus-visible{outline:2px solid #fff;outline-offset:2px} /* Mobile is swipe-only: hide the edge arrows across the 1-card carousel range */ @media (max-width:759px){.wheel__arrow--edge{display:none}} /* Show exactly 3 cards across on wider screens (no cropped 4th); exactly 1, centered, on mobile */ @media (min-width:760px){.wheel__card{flex-basis:calc((100% - 2rem) / 3)}} /* Mobile: native CSS snap centers each card (handles touch momentum); dots are indicators only */ @media (max-width:759px){ .wheel__track{scroll-snap-type:x mandatory;padding-left:16px;scroll-padding-left:16px} /* 2-up: the snapped card sits left-aligned at full size + a smaller "next" preview to its right (the JS coverflow scales that neighbour down). 1.8 cards per view, 16px gap, 16px left inset so the main card isn't against the screen edge. */ .wheel__card{flex-basis:calc((100% - 12.8px) / 1.8);scroll-snap-align:start} .wheel__dots{pointer-events:none} } /* Full filterable ledger */ .ledger{margin-top:clamp(2.5rem,5vw,4rem)} .ledger__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1.4rem} .tabs{display:inline-flex;background:var(--paper);border:1px solid var(--hair);border-radius:999px;padding:4px} .tab{padding:.55rem 1.1rem;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--text-dim); transition:color .2s,background .2s;min-height:40px} .tab[aria-selected="true"]{background:var(--maroon);color:#fff} .tab .n{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:.78rem;opacity:.7;margin-left:.3rem} .ledger__count{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:500;font-size:.82rem;letter-spacing:.01em;color:var(--text-dim)} .table{width:100%;border-collapse:collapse;font-size:.95rem} .table thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--text-dim);text-align:left;font-weight:500;padding:.7rem 1rem;border-bottom:1px solid var(--hair-strong); vertical-align:top} .table th.num,.table td.num{text-align:right} .table tbody td{padding:.95rem 1rem;border-bottom:1px solid var(--hair);vertical-align:top} .table tbody tr{cursor:pointer;transition:background .16s} .table tbody tr:hover{background:rgba(102,0,51,.035)} /* Photo-less projects: list entry only, not viewable (per client brief). */ .table tbody tr.is-static{cursor:default} .table tbody tr.is-static:hover{background:transparent} .table .p-name{font-weight:600;letter-spacing:-.01em} .table .p-star{color:var(--maroon);margin-right:.35rem} .table .p-loc{color:var(--text-dim);font-size:.85rem;margin-top:.15rem} .ledger__pager{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1.9rem} .ledger__nav{display:flex;align-items:center;justify-content:center;gap:.7rem} .ledger__pager.single .ledger__nav{display:none} .wheel__arrow:disabled{opacity:.32;pointer-events:none} /* Ledger paging: prev/next buttons on desktop, swipe + dots on mobile. */ .ledger__arrow{place-items:center;width:38px;height:38px;border-radius:50%; border:1px solid var(--hair-strong);background:transparent;color:var(--text-dim);cursor:pointer; transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)} @media (min-width:760px){ .ledger__arrow{display:grid} /* show the prev/next buttons */ .ledger__pager .ledger__dots{display:none} /* drop the dot carousel on desktop (beats the shared .ledger__dots rule) */ } .ledger__pager .ledger__count{margin:0;text-align:center} /* Unified carousel dots — shared by featured wheel + ledger paginator */ .ledger__dots,.wheel__dots{display:flex;gap:.2rem;justify-content:center;flex-wrap:nowrap} .ledger__dots:empty,.wheel__dots:empty{display:none} .ledger__dots button,.wheel__dots button{width:14px;height:16px;display:grid;place-items:center;background:none;border:none;padding:0;cursor:pointer;transform-origin:center;transition:transform .3s var(--ease)} /* All dots are the same-size circle; the active one is set apart by colour only. */ /* Neutral default dots, consistent across every carousel: they take each section's own foreground colour (dark on light sections, white on dark/maroon ones). */ .ledger__dots button::before,.wheel__dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .25s} .ledger__dots button:hover::before,.wheel__dots button:hover::before{opacity:.6} .ledger__dots button[aria-current="true"]::before,.wheel__dots button[aria-current="true"]::before{opacity:1} /* Small/short phones (iPhone 7 and smaller): Capabilities + Why card grids become one-per-view swipe carousels; bigger phones keep the grid (JS gates .is-carousel). */ /* Mini carousel dots show ONLY when the grid is an active carousel (so the desktop grid, where all members/cards are visible, has no dots). */ .mini__pager{display:none;margin-top:1.1rem} .is-carousel + .mini__pager{display:flex} /* Mouse click-drag on the card carousels (team/services/values), same as the featured wheel: grab cursor, and while dragging disable smooth-scroll + text selection so the drag follows the cursor cleanly. */ @media (pointer:fine){.is-carousel{cursor:grab}} .is-carousel.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none;-webkit-user-select:none} .is-carousel.dragging img,.is-carousel.dragging svg{-webkit-user-drag:none} /* Capabilities + Why: swipe carousel on all phones (grid on wider). */ @media (max-width:640px){ .stack .svc__grid.is-carousel,.stack .val__grid.is-carousel{ display:flex;grid-template-columns:none;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch; margin-top:2.6rem;padding-top:.4rem} /* breathing room between the section text and the cards */ .stack .svc__grid.is-carousel::-webkit-scrollbar,.stack .val__grid.is-carousel::-webkit-scrollbar{display:none} .stack .svc__grid.is-carousel>*,.stack .val__grid.is-carousel>*{flex:0 0 100%;scroll-snap-align:center;min-width:0} } /* iPhone 7 and smaller (<=375px): one card per view. Bigger phones show two equal cards side by side (left-aligned), swipe for the rest. */ @media (min-width:376px) and (max-width:640px){ .stack .svc__grid.is-carousel>*,.stack .val__grid.is-carousel>*{ flex-basis:calc((100% - .7rem) / 2);scroll-snap-align:start} } /* Team: one-per-view swipe carousel with coverflow on all phones (grid on wider). */ @media (max-width:640px){ .stack .team__grid.is-carousel{ display:flex;grid-template-columns:none;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch} .stack .team__grid.is-carousel::-webkit-scrollbar{display:none} .stack .team__grid.is-carousel>*{flex:0 0 100%;scroll-snap-align:center;min-width:0} } /* iPhone 7 and smaller (<=375px): one member per view. Bigger phones fit two, full-bleed to the screen edges so the peek cards aren't cropped inside the gutter (heading/text stay inset). */ @media (min-width:376px) and (max-width:640px){ .stack .team__grid.is-carousel{margin-inline:calc(-1 * var(--gutter))} .stack .team__grid.is-carousel>*{flex-basis:calc((100% - .7rem) / 1.8)} } .team__grid .member.cf-spin{will-change:transform,opacity} /* Bigger cards in the team carousel (larger avatar + text); even larger on the one-per-view (iPhone 7) where the card is full-width. */ /* Profile-card look: the circular avatar protrudes above the card's top edge (adapted from the reference — colours unchanged). The carousel gets top padding so the protruding avatars aren't clipped by the scroll container. */ /* Fluid avatar size (--av) so it scales across screens; members/avatars inherit it. */ .team__grid.is-carousel{--av:clamp(112px,33vw,144px);padding-top:calc(var(--av) * .5 + 18px)} .team__grid.is-carousel .member{position:relative;overflow:visible;justify-content:flex-start; padding:calc(var(--av) * .55 + .7rem) 1.2rem 1.5rem} .team__grid.is-carousel .avatar{position:absolute;top:calc(var(--av) * -.45);left:50%;transform:translateX(-50%); width:var(--av);height:var(--av);font-size:clamp(1.9rem,6vw,2.2rem)} .team__grid.is-carousel .member h4{font-size:1.15rem} .team__grid.is-carousel .member__role{font-size:.95rem} @media (max-width:375px){ .team__grid.is-carousel{--av:clamp(118px,38vw,148px)} } /* Desktop/tablet grid: same profile-card look (avatar protruding above the card). */ @media (min-width:641px){ .stack .team__grid{margin-top:calc(clamp(1.8rem,3vw,2.6rem) + 34px)} .team__grid .member{--av:116px;position:relative;overflow:visible;justify-content:flex-start; padding:calc(var(--av) * .55 + .7rem) 1.3rem 1.5rem} .team__grid .avatar{position:absolute;top:calc(var(--av) * -.45);left:50%;transform:translateX(-50%); width:var(--av);height:var(--av)} } /* In carousel mode the coverflow drives transform per frame — drop the card's transform transition so it tracks the scroll instantly (no lag). */ .team__grid.is-carousel .member, .svc__grid.is-carousel .svc, .val__grid.is-carousel .val{transition:none} /* Loop clones: only shown while the grid is an active carousel. */ .svc__grid:not(.is-carousel) .mini-clone, .val__grid:not(.is-carousel) .mini-clone, .team__grid:not(.is-carousel) .mini-clone{display:none} /* Dots read on the dark Capabilities and maroon Why backgrounds. */ .ledger__scroll{overflow-x:auto} /* Ledger paging reveal — rows slide in from the swipe/paging direction, staggered. Same on desktop (buttons) and mobile (swipe). */ @keyframes rowInUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} @keyframes rowInRight{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}} @keyframes rowInLeft{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}} #ledgerBody tr{animation:rowInUp .42s var(--ease) both} #ledgerBody.dir-next tr{animation-name:rowInRight} #ledgerBody.dir-prev tr{animation-name:rowInLeft} #ledgerBody tr:nth-child(1){animation-delay:.02s} #ledgerBody tr:nth-child(2){animation-delay:.09s} #ledgerBody tr:nth-child(3){animation-delay:.16s} #ledgerBody tr:nth-child(4){animation-delay:.23s} @media (prefers-reduced-motion:reduce){#ledgerBody tr{animation:none}} @media (max-width:520px){ .table thead th{padding:.55rem .5rem} .table tbody td{padding:.85rem .5rem} .table .p-name{font-size:.9rem} .table .status{font-size:.6rem;padding:.24rem .5rem} } /* ========================= INSTITUTIONS STRIP ========================= */ .insts{background:var(--paper)} /* Desktop: one auto-fit row of all logos. The page wrappers are transparent (display:contents) so every .inst-tile flows straight into this grid. */ .insts__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:2rem} .insts__row.reveal{opacity:1;transform:none;transition:none} /* row static; tiles carry the intro */ .inst-page{display:contents} @keyframes instIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}} .inst-tile{background:none;border:none;border-radius:0; min-height:clamp(104px,12vw,140px);display:grid;place-items:center;padding:1rem;opacity:0; transition:translate .25s var(--ease),opacity .25s} .insts__row.in .inst-tile{animation:instIn .55s var(--ease) both} /* per-tile animation-delay is set inline */ .inst-tile:hover{translate:0 -4px} .inst-tile img{max-height:78px;max-width:100%;width:auto;height:auto;object-fit:contain} @media (prefers-reduced-motion:reduce){.insts__row .inst-tile{opacity:1}.insts__row.in .inst-tile{animation:none}} /* Mobile: paged swipe carousel — 4 logos (2x2) per full-bleed page, swipe for the rest. */ @media (max-width:639px){ .insts__row{display:flex;grid-template-columns:none;gap:0;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none; -webkit-overflow-scrolling:touch;margin-inline:calc(-1 * var(--gutter))} .insts__row::-webkit-scrollbar{display:none} .inst-page{display:grid;grid-template-columns:1fr 1fr;gap:1rem; flex:0 0 100%;box-sizing:border-box;padding-inline:var(--gutter);scroll-snap-align:center} .inst-page .inst-tile:last-child:nth-child(odd){grid-column:1 / -1} /* lone last logo centers */ } /* Dots pager: mobile only (matches the other carousels' dots). */ .insts__pager{display:none;justify-content:center;margin-top:1.1rem} @media (max-width:639px){.insts__pager{display:flex}} /* ============================== SERVICES ============================== */ .services{background:var(--charcoal);color:var(--on-dark)} .svc__grid{display:grid;gap:1.1rem;margin-top:clamp(1.8rem,3vw,2.6rem);grid-template-columns:1fr} @media (min-width:760px){.svc__grid{grid-template-columns:repeat(3,1fr)}} .svc{position:relative;background:rgba(255,255,255,.02);border:1px solid var(--hair-dark);border-radius:var(--radius); padding:1.6rem;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s,background .25s} .svc:hover{transform:translateY(-4px);box-shadow:0 26px 46px -26px rgba(0,0,0,.55);border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.045)} .svc__no{display:block;font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--maroon-lift)} .svc h3{margin-top:.7rem;font-size:1.12rem;letter-spacing:-.015em;color:var(--on-dark)} .svc p{margin-top:.55rem;color:var(--on-dark-dim);font-size:.93rem;line-height:1.5} /* =============================== ABOUT =============================== */ .about{background:var(--offwhite)} /* About leads with Mission & Vision (full-width), then the Three C's row */ .about__grid{display:grid;gap:clamp(1.8rem,3.5vw,2.8rem);grid-template-columns:1fr} .mv{display:grid;gap:1.4rem} @media (min-width:720px){.mv{grid-template-columns:1fr 1fr;gap:1.8rem}} .mv__block{border-left:1px solid var(--hair);padding-left:1.2rem;position:relative} .mv__block::before{content:"";position:absolute;left:-1px;top:.15rem;width:1px;height:1.3rem;background:var(--maroon)} .mv__block .mv__k{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)} .mv__block p{margin-top:.5rem;color:var(--text-dim);max-width:52ch} .threec{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;align-self:start} @media (min-width:720px){.threec{grid-template-columns:repeat(3,1fr)}} .threec__item{background:var(--paper);padding:1.3rem 1.4rem} .threec__item h4{font-size:1.05rem;display:flex;align-items:baseline;gap:.6rem;color:var(--text)} .threec__item h4 span{font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--maroon)} .threec__item p{margin-top:.4rem;color:var(--text-dim);font-size:.92rem} /* ============================ CORE VALUES ============================ */ .values{background:var(--charcoal);color:var(--on-dark)} /* Why: a bold brand-maroon card — the standout "why choose Artsons" moment, distinct from the neutral dark/light deck cards. Glass reason-tiles read on the deep ground. */ .why{position:relative;isolation:isolate;--mx:50%;--my:40%;background: radial-gradient(115% 95% at 90% 6%, rgba(65,105,225,.42) 0%, rgba(65,105,225,0) 52%), radial-gradient(90% 80% at 6% 100%, rgba(65,105,225,.2) 0%, rgba(65,105,225,0) 46%), linear-gradient(155deg,#8a1a52 0%,#5c0030 58%,#48001f 100%);color:#fff} /* Blue branding flashlight: a screen-blended blue glow follows the cursor and fades out gradually, brightening only the area under the pointer. */ .why::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:0;transition:opacity .5s var(--ease);mix-blend-mode:screen; background:radial-gradient(circle 580px at var(--mx) var(--my), rgba(93,140,255,.2) 0%, rgba(65,105,225,.09) 45%, rgba(65,105,225,0) 80%)} .why > .wrap{position:relative;z-index:1} @media (hover:hover) and (pointer:fine){.why.is-spot::after{opacity:1}} .why .h2,.why .section-head .h2{color:#fff} .why .lede{color:rgba(255,255,255,.85)} /* Cards lit from behind only: a soft blue back-glow grows as the light nears (--lit) — no cast shadow. The hovered card lifts. */ .why .val{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); box-shadow:0 0 calc(18px + 42px * var(--lit,0)) rgba(93,140,255,calc(.28 * var(--lit,0))); transition:transform .25s var(--ease),box-shadow .2s var(--ease),background .25s,border-color .25s} .why .val:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);transform:translateY(-5px)} .why .val__n{color:var(--blue-soft)} .why .val h4{color:#fff} .why .val p{color:rgba(255,255,255,.82)} .val__grid{display:grid;gap:1.1rem;margin-top:clamp(1.8rem,3vw,2.6rem);grid-template-columns:1fr} @media (min-width:620px){.val__grid{grid-template-columns:1fr 1fr}} @media (min-width:980px){.val__grid{grid-template-columns:repeat(4,1fr)}} .val{background:rgba(255,255,255,.02);border:1px solid var(--hair-dark);border-radius:var(--radius); padding:1.6rem;transition:background .25s var(--ease),border-color .25s} .val:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.24)} .val__n{display:block;font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--maroon-lift)} .val h4{margin-top:.7rem;font-size:1.12rem;letter-spacing:-.015em;color:var(--on-dark)} .val p{margin-top:.55rem;color:var(--on-dark-dim);font-size:.93rem;line-height:1.5} /* =============================== TEAM =============================== */ /* Crew photo backdrop with a "flashlight" reveal: a faint desaturated base so text stays legible, and a full-colour layer masked to a soft circle that follows the cursor (--mx/--my set from JS on hover-capable devices). */ .team{position:relative;isolation:isolate;background:var(--offwhite);--mx:50%;--my:36%} .team::before,.team::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none} /* Faint desaturated base — constant across the whole section; hover never touches it, so only the flashlight circle changes. */ .team::before{background:url("../assets/img/team/team-crew.webp") center/cover no-repeat; filter:grayscale(1) contrast(.9) brightness(1.12);opacity:.09} /* Flashlight: the crew photo (softened by a white veil) revealed in colour under the cursor, masked to a circle that fades out gradually into the b&w base — the member cards additionally cast light-driven shadows (from JS). */ .team::after{opacity:0;transition:opacity .5s var(--ease); background:linear-gradient(rgba(247,247,245,.5),rgba(247,247,245,.5)), url("../assets/img/team/team-crew.webp") center/cover no-repeat; -webkit-mask-image:radial-gradient(circle 340px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 40%,transparent 100%); mask-image:radial-gradient(circle 340px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.55) 40%,transparent 100%)} .team > .wrap{position:relative;z-index:1} @media (hover:hover) and (pointer:fine){ .team.is-spot::after{opacity:1} .team.is-spot.is-oncard::after{opacity:0} /* off while hovering a member card */ } /* Hovering the heading/lede highlights the words themselves in brand maroon — a tight per-line "subtitle" background behind the text only, not the container. */ /* Vertical padding only (keeps text flush-left so heading + lede align); the horizontal breathing room comes from box-shadow so it never indents the text. */ .team .section-head .hl{ -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.06em 0;border-radius:0;background-color:transparent;color:inherit; transition:background-color .3s var(--ease),box-shadow .3s var(--ease)} .team .section-head:hover .hl{background-color:#fff;box-shadow:3px 0 0 #fff,-3px 0 0 #fff} .team__grid{display:grid;gap:1rem;margin-top:clamp(1.8rem,3vw,2.6rem);grid-template-columns:1fr} .team__grid > *,.svc__grid > *,.val__grid > *,.insts__row > *{min-width:0} /* prevent long content from blowing out the columns */ @media (min-width:560px){.team__grid{grid-template-columns:1fr 1fr}} @media (min-width:960px){.team__grid{grid-template-columns:repeat(4,1fr)}} /* Cards stay in full colour; the shadow offsets with the light behind them (--shx/--shy) and the card lifts on hover. */ .member{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);padding:1.3rem; display:flex;flex-direction:column;align-items:center;text-align:center; box-shadow:var(--shx,0px) var(--shy,12px) 30px -14px rgba(20,22,28,calc(.24 + .26 * var(--lit,0))); transition:transform .32s var(--ease),box-shadow .16s linear} .member:hover{transform:translateY(-6px)} @media (prefers-reduced-motion:reduce){.member:hover{transform:none}} .avatar{width:112px;height:112px;border-radius:50%;display:grid;place-items:center; font-family:var(--mono);font-weight:500;font-size:1.7rem;color:#fff; background:linear-gradient(140deg,var(--maroon),var(--maroon-soft)); border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .avatar--photo{background:none;border:none;object-fit:cover;box-shadow:none;max-width:none;aspect-ratio:1} .member__disc{margin-top:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em; text-transform:uppercase;color:var(--blue)} .member h4{margin-top:.5rem;font-size:1.06rem;color:var(--text)} .member__role{margin-top:.25rem;color:var(--text-dim);font-size:.9rem} /* ========================= CERTIFICATIONS ========================= */ .certs{background:var(--charcoal);color:var(--on-dark)} .cert__grid{display:grid;gap:1rem;margin-top:clamp(1.8rem,3vw,2.6rem);grid-template-columns:1fr} @media (min-width:560px){.cert__grid{grid-template-columns:1fr 1fr}} @media (min-width:960px){.cert__grid{grid-template-columns:repeat(4,1fr)}} /* Certificates carousel — mirrors the featured wheel: 3 across on desktop, one centred card on mobile, and the same reveal-on-hover/centre animations. */ .certs__wheel .cert__grid{display:flex;grid-template-columns:none;gap:1rem;margin-top:0; padding:16px 2px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;-webkit-overflow-scrolling:touch} .certs__wheel .cert__grid::-webkit-scrollbar{display:none} .certs__wheel .cert{flex:0 0 100%;scroll-snap-align:center} /* Tighten the certs deck-card spacing so the cards sit higher (less top gap). */ .stack .certs .section-head{margin-bottom:clamp(.75rem,1.6vw,1.3rem)} .certs__wheel{margin-top:clamp(.4rem,1vw,.85rem)} .certs__wheel .wheel__track{padding-top:8px} @media (min-width:760px){.certs__wheel .cert{flex-basis:calc((100% - 2rem) / 3);scroll-snap-align:start}} /* Reveal the shade + label on hover (desktop) or on the centred card (mobile). */ .certs__wheel .cert__shade{opacity:0;transition:opacity .4s var(--ease)} .certs__wheel .cert__body{opacity:0;transform:translateY(12px);transition:opacity .42s var(--ease),transform .42s var(--ease)} .certs__wheel .cert:hover .cert__shade,.certs__wheel .cert:focus-within .cert__shade,.certs__wheel .cert.is-live .cert__shade{opacity:1} .certs__wheel .cert:hover .cert__body,.certs__wheel .cert:focus-within .cert__body,.certs__wheel .cert.is-live .cert__body{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){.certs__wheel .cert__shade,.certs__wheel .cert__body{transition:none;transform:none}} /* Coverflow: drop the shade blur while a card is rotated in 3D (glitches otherwise). */ .certs__wheel .cert.cf-spin{will-change:transform,opacity} .certs__wheel .cert.cf-spin .cert__shade{-webkit-backdrop-filter:none;backdrop-filter:none} /* Certs: exactly three cards on desktop (centered, no partial 4th). On mobile the certs deck uses the same 2-up layout as the featured wheel (shared .wheel__card). */ /* Certificate cards use the featured-project card look: 3/4 photo, frosted gradient, title overlaid on the image (no "View certificate" CTA). Laid out as a static grid. */ .cert{position:relative;overflow:hidden;cursor:pointer; aspect-ratio:3/4;width:100%;background:var(--charcoal);border:none;border-radius:20px; box-shadow:0 12px 26px -14px rgba(28,36,45,.4),0 4px 9px -6px rgba(28,36,45,.28); transition:box-shadow .25s var(--ease)} .cert:hover{box-shadow:0 20px 38px -18px rgba(8,11,16,.5),0 8px 16px -8px rgba(8,11,16,.38)} .cert__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:20px} .cert__shade{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:20px; background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 22%,rgba(0,0,0,.3) 46%,rgba(0,0,0,.06) 62%,transparent 76%); -webkit-backdrop-filter:blur(18px) saturate(1.12);backdrop-filter:blur(18px) saturate(1.12); -webkit-mask-image:linear-gradient(to top,#000 0%,#000 34%,transparent 64%); mask-image:linear-gradient(to top,#000 0%,#000 34%,transparent 64%)} .cert__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem 1.3rem; display:flex;flex-direction:column;align-items:flex-start;gap:.35rem} .cert__code{color:#fff;font-weight:600;font-size:1.08rem;line-height:1.18;letter-spacing:-.01em} .cert p{color:rgba(255,255,255,.82);font-size:.85rem;line-height:1.35} /* =============================== FAQ =============================== */ .faq{background:var(--offwhite)} .faq__list{margin-top:clamp(1.8rem,3vw,2.6rem);border-top:1px solid var(--hair)} .faq__item{border-bottom:1px solid var(--hair)} .faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem; text-align:left;padding:1.3rem 0;font-weight:600;font-size:1.05rem;color:var(--text);letter-spacing:-.01em} .faq__q .ico{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--hair-strong); display:grid;place-items:center;position:relative;transition:border-color .2s,background .2s} .faq__q[aria-expanded="true"] .ico{background:var(--maroon);border-color:var(--maroon)} .faq__q .ico::before,.faq__q .ico::after{content:"";position:absolute;background:currentColor;transition:transform .25s var(--ease),opacity .2s} .faq__q .ico::before{width:11px;height:1.6px} .faq__q .ico::after{width:1.6px;height:11px} .faq__q[aria-expanded="true"] .ico{color:#fff} .faq__q[aria-expanded="true"] .ico::after{transform:scaleY(0);opacity:0} .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s var(--ease)} .faq__a[data-open]{grid-template-rows:1fr} .faq__a-inner{overflow:hidden;min-height:0;color:var(--text-dim);max-width:64ch} .faq__a[data-open] .faq__a-inner{padding-bottom:1.3rem} @media (prefers-reduced-motion:reduce){.faq__a{transition:none}} /* ============================= CONTACT ============================= */ .contact{background:var(--ink);color:var(--on-dark)} /* ============================== CAREERS ============================== Intentional exception: the careers section uses the SECONDARY colour (royal blue) as its ground so it reads as a distinct space for people looking for a job — not clients hiring a contractor. Deepened enough that white text clears AA. */ .careers{position:relative;overflow:hidden;background:linear-gradient(160deg,#3a58d0 0%,#22397f 100%);color:var(--on-dark)} .careers .wrap{position:relative;z-index:1} .careers .h2{color:#fff} .careers .lede{color:rgba(255,255,255,.9)} /* Faint blueprint line-work fills the empty side and ties to the hero's language */ .careers__art{position:absolute;right:-30px;bottom:0;width:min(46%,540px);z-index:0;pointer-events:none; opacity:.5;-webkit-mask-image:linear-gradient(100deg,transparent,#000 55%);mask-image:linear-gradient(100deg,transparent,#000 55%)} .careers__blueprint{width:100%;height:auto;display:block} @media (max-width:900px){.careers__art{display:none}} .careers__panel{margin-top:clamp(1.4rem,3vw,2rem);max-width:540px; background:var(--paper);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius); padding:clamp(1.7rem,4vw,2.6rem);text-align:left; display:flex;flex-direction:column;align-items:flex-start;gap:.9rem; box-shadow:0 26px 60px -28px rgba(9,16,45,.6)} .careers__badge{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:600; font-size:.82rem;letter-spacing:.01em;color:var(--maroon); background:rgba(102,0,51,.07);border:1px solid rgba(102,0,51,.16);padding:.42rem .95rem;border-radius:999px} .careers__dot{width:8px;height:8px;border-radius:50%;background:var(--maroon);box-shadow:0 0 0 0 rgba(102,0,51,.4); animation:careerPulse 2.4s var(--ease) infinite} @keyframes careerPulse{0%{box-shadow:0 0 0 0 rgba(102,0,51,.35)}70%{box-shadow:0 0 0 7px rgba(102,0,51,0)}100%{box-shadow:0 0 0 0 rgba(102,0,51,0)}} @media (prefers-reduced-motion:reduce){.careers__dot{animation:none}} .careers__lead{margin-top:.15rem;color:var(--text);font-size:clamp(1.15rem,2.4vw,1.45rem);letter-spacing:-.02em;line-height:1.2} .careers__rolehint{margin:0;color:var(--text-dim);font-size:.9rem} .careers__roles{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;border:0} .careers__role{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:var(--text);cursor:pointer; background:rgba(102,0,51,.05);border:1px solid rgba(102,0,51,.16);padding:.5rem .95rem;border-radius:12px; transition:background .2s var(--ease),border-color .2s,color .2s} .careers__role input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .careers__role::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--maroon);opacity:.55;transition:background .2s,opacity .2s,transform .2s} .careers__role:hover{border-color:rgba(102,0,51,.3)} .careers__role:has(input:checked){background:var(--maroon);border-color:var(--maroon);color:#fff} .careers__role:has(input:checked)::before{background:#fff;opacity:1;transform:scale(1.25)} .careers__role:has(input:focus-visible){outline:2px solid var(--blue-soft);outline-offset:2px} .careers__names{display:flex;flex-wrap:wrap;gap:.6rem;width:100%} .careers__input{flex:1 1 140px;min-width:0;background:#fff;border:1px solid var(--hair);border-radius:12px; padding:.7rem .9rem;font:inherit;color:var(--text)} .careers__input::placeholder{color:var(--text-dim)} .careers__input:focus{outline:none;border-color:var(--maroon-soft);box-shadow:0 0 0 3px rgba(102,0,51,.12)} .careers__input.invalid{border-color:#c0344f;box-shadow:0 0 0 3px rgba(192,52,79,.14)} .careers__err{margin:0;color:#c0344f;font-size:.82rem;font-weight:600} .careers__note{color:var(--text-dim);max-width:46ch;line-height:1.6} .careers__panel .btn{margin-top:.35rem} .contact__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;margin-top:clamp(1.8rem,3vw,2.6rem)} @media (min-width:900px){.contact__grid{grid-template-columns:1fr 1fr}} .field{margin-bottom:1.1rem} .field label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase; color:var(--on-dark-dim);margin-bottom:.5rem} .field label .req{color:var(--maroon-lift)} .field input,.field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--hair-dark); border-radius:12px;padding:.85rem 1rem;color:var(--on-dark);font:inherit;min-height:50px;transition:border-color .2s,background .2s} .field textarea{min-height:130px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:var(--text-dim)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--blue-soft);background:rgba(255,255,255,.06)} .field.invalid input,.field.invalid textarea{border-color:#e0607f} .field__err{display:none;margin-top:.4rem;font-size:.78rem;color:#f090a6} .field.invalid .field__err{display:block} .form__submit{margin-top:.4rem} .form__note{margin-top:1rem;font-size:.82rem;color:var(--on-dark-dim)} .form__status{margin-top:1rem;font-family:var(--mono);font-size:.82rem;color:var(--blue-soft);min-height:1.2em} .contact__info{display:grid;gap:1.1rem;align-content:start} .info-row{display:flex;gap:.9rem;align-items:flex-start} .info-row .ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center; background:rgba(102,0,51,.16);color:var(--maroon-lift)} .info-row .ic svg{width:20px;height:20px} .info-row .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-dim)} .info-row .v{margin-top:.15rem;color:var(--on-dark);font-weight:500} .info-row a.v{color:var(--on-dark)}.info-row a.v:hover{color:var(--maroon-lift)} /* Prevent the grid/flex from being blown wider than the screen by long unbreakable strings (emails, URLs, the address) — let items shrink and long values wrap. */ .contact__grid > *{min-width:0} .info-row > div{min-width:0} .info-row .v{overflow-wrap:anywhere} .map{margin-top:.5rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--hair-dark); aspect-ratio:16/10;position:relative;background:var(--charcoal)} .map iframe{width:100%;height:100%;border:0;display:block} .map__ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem; font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-dim)} /* ============================== FOOTER ============================== */ .footer{background:var(--ink-deep);color:var(--on-dark);padding-block:clamp(3rem,6vw,4.5rem) 7rem} .footer__top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start} .footer__logo{height:34px;width:auto;margin-bottom:1rem} .footer__tag{color:var(--on-dark-dim);max-width:34ch;font-size:.94rem} .footer__social{display:flex;gap:.7rem} .footer__social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff; background:rgba(255,255,255,.08);border:1px solid var(--hair-dark); transition:background .2s var(--ease),border-color .2s,transform .2s var(--ease)} .footer__social a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);transform:translateY(-2px);text-decoration:none} .footer__social svg{width:18px;height:18px} .footer__nav{display:flex;flex-wrap:wrap;gap:1.2rem} .footer__nav a{color:var(--on-dark-dim);font-weight:500;font-size:.92rem} .footer__nav a:hover{color:var(--on-dark);text-decoration:none} .footer__rule{height:1px;background:var(--hair-dark);margin:2.2rem 0 1.4rem} .footer__legal{font-family:var(--sans);font-size:.82rem;letter-spacing:0;color:var(--on-dark-dim);line-height:1.7} /* ======================= BOTTOM LIQUID-GLASS NAV ======================= */ .dock{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%) translateY(0) scale(1); z-index:200;display:flex;gap:2px;padding:7px;border-radius:26px; background:linear-gradient(180deg,rgba(122,10,66,.62),rgba(102,0,51,.72)); -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(255,255,255,.16); box-shadow:0 12px 40px -8px rgba(0,0,0,.5),0 2px 10px -2px rgba(102,0,51,.6); transform-origin:bottom center; /* Smooth exponential ease-out on return; the hide state below defines its own exit. */ transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .38s ease;will-change:transform,opacity; width:max-content;max-width:calc(100vw - 20px); overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .dock::-webkit-scrollbar{display:none} .dock__item{flex:none} .dock.compact{transform:translateX(-50%) translateY(0) scale(.945)} /* Mobile: slide the dock away while scrolling; it pops back when scrolling stops. Also tucked away while the contact form is focused (see dock--form-hidden). */ @media (max-width:820px){ .dock.is-hidden,.dock.compact.is-hidden, .dock--form-hidden{transform:translateX(-50%) translateY(135%) scale(.92);opacity:0;pointer-events:none; transition:transform .32s cubic-bezier(.5,0,.75,.15),opacity .24s ease} } .dock__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-width:60px;min-height:48px;padding:.4rem .55rem;border-radius:20px;color:rgba(255,255,255,.5); transition:color .2s,background .25s var(--ease)} .dock__item:hover{color:rgba(255,255,255,.85);text-decoration:none} .dock__item svg{width:21px;height:21px;transition:transform .25s var(--ease)} .dock__mark{height:23px;width:auto;display:block;transition:transform .25s var(--ease),opacity .2s,filter .2s} /* Home logo fades to grey when you're not on the home section (matches the item fade) */ .dock__item--home:not([aria-current="page"]) .dock__mark{opacity:.5;filter:grayscale(1)} .dock__item--home{gap:0;padding-inline:.7rem} .dock__item--home:hover .dock__mark,.dock__item--home[aria-current="page"] .dock__mark{transform:translateY(-1px)} .dock__label{font-size:.66rem;font-weight:600;letter-spacing:.01em;transition:opacity .2s} .dock__item[aria-current="page"]{color:#fff} .dock__item[aria-current="page"] svg{transform:translateY(-1px)} @media (max-width:480px){.dock{gap:1px;padding:5px;border-radius:23px} .dock__item{min-width:43px;min-height:44px;padding:.32rem .17rem;border-radius:17px} .dock__item svg{width:18px;height:18px} .dock__label{font-size:.54rem} .dock__item--home{padding-inline:.32rem}.dock__mark{height:18px}} /* Tiny phones (~320px): tighten so all 7 items fit without the last label cutting off. */ @media (max-width:360px){.dock{gap:0;padding:4px;border-radius:20px} .dock__item{min-width:37px;min-height:41px;padding:.28rem .05rem} .dock__item svg{width:17px;height:17px} .dock__label{font-size:.5rem;letter-spacing:0} .dock__item--home{padding-inline:.2rem}.dock__mark{height:16px}} /* ================== LIGHTBOX — Facebook-style photo viewer ================== */ .lightbox{position:fixed;inset:0;z-index:300;display:none;background:rgba(0,0,0,.94)} .lightbox.open{display:block} .lb{display:flex;width:100%;height:100%} /* Dismiss animation: the dark backdrop fades out while the viewer shrinks and slides toward the exit direction (swipe up/down on mobile; downward on desktop close). --lb-exit-y is set by JS per gesture; JS removes .open after the animation finishes. */ @media (prefers-reduced-motion:no-preference){ .lightbox.lb-exit{background:rgba(0,0,0,0);transition:background-color .32s ease} .lightbox.lb-exit .lb{opacity:0;transform:translateY(var(--lb-exit-y,16vh)) scale(.78); transform-origin:center;will-change:transform,opacity; transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .34s cubic-bezier(.4,0,.2,1)} .lightbox.lb-exit .lb__close,.lightbox.lb-exit .lb-guide{opacity:0;transition:opacity .2s ease} /* Entrance: the viewer fades in instead of popping. Opacity-only (no transform) so it never skews the photo-box measurement the watermark relies on. */ .lightbox.open:not(.lb-exit) .lb{animation:lbIn .28s var(--ease) both} } @keyframes lbIn{from{opacity:0}to{opacity:1}} /* Image stage */ .lb__stage{position:relative;flex:1 1 auto;min-width:0;display:grid;place-items:center;overflow:hidden} .lb__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0; transition:opacity .28s var(--ease);padding:clamp(1rem,4vw,3.5rem);pointer-events:none} /* Only the visible slide takes clicks — otherwise the last (invisible) slide, stacked on top, would steal taps meant for video controls / the play button on other slides. */ .lb__slide.active{opacity:1;pointer-events:auto} .lb__slide img,.lb__slide svg,.lb__slide video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; border-radius:6px;box-shadow:0 24px 70px -24px rgba(0,0,0,.8)} .lb__slide video{background:#000} /* Video poster + play button (real