/* ============================================================================ SHIFTLY — DESIGN SYSTEM · "Moves redefined" Luxury removals brand system. Wheely-grade restraint, warm British palette. Contents 01. Fonts 02. Tokens 03. Base & resets 04. Layout primitives .shell .section .rule .grid-* 05. Typography .eyebrow .display .h1-.h4 .lead .micro 06. Buttons .btn .btn-primary .btn-ink .btn-ghost .btn-light 07. Header & navigation .site-header .nav-link .mega .drawer 08. Media .media .ratio-* .scrim .zoom 09. Cards .card .service-card .area-card .step .stat .quote-card 10. Forms .field .input .select .textarea .form-panel 11. Accordion / FAQ 12. Footer 13. Motion & utilities [data-reveal] .marquee .swiper overrides ========================================================================== */ /* 01. FONTS ---------------------------------------------------------------- */ @font-face{font-family:'Favorit';src:url('../fonts/FavoritLightC.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Favorit';src:url('../fonts/FavoritBookC.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Favorit';src:url('../fonts/FavoritC.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Favorit';src:url('../fonts/FavoritC-Italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap} @font-face{font-family:'Favorit';src:url('../fonts/FavoritC-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Favorit';src:url('../fonts/FavoritExtraBoldC.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Favorit';src:url('../fonts/FavoritHeavyC.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap} /* 02. TOKENS --------------------------------------------------------------- */ :root{ /* brand */ --sand:#D6A569; /* primary — brand gold */ --sand-deep:#C68945; /* primary hover / secondary */ --bronze:#A7641C; /* deep accent — display type, icons, quote marks */ --bronze-ink:#8C5416; /* same hue, darkened for small text: AA on paper & bone */ --linen:#EACEA9; /* soft accent, text on ink */ --ink:#151414; /* near-black */ --ink-deep:#0B0302; /* the logo's own black, used on gold */ --charcoal:#282524; /* dark surface */ /* neutrals derived */ --paper:#FBF9F6; --bone:#F4EFE8; --stone:#EAE4DB; --muted:#6E6862; --muted-dark:rgba(234,206,169,.7); --line:rgba(21,20,20,.14); --line-soft:rgba(21,20,20,.08); --line-dark:rgba(234,206,169,.18); /* type */ --font-display:'Favorit','Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-ui:'Inter Tight','Favorit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* rhythm */ --gutter:clamp(20px,5vw,72px); --shell:1560px; --section-y:clamp(72px,9vw,148px); /* motion */ --ease:cubic-bezier(.19,1,.22,1); --ease-soft:cubic-bezier(.4,0,.2,1); --header-h:104px; } /* 03. BASE ----------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-ui);font-size:16px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;overflow-x:hidden; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,h4,h5,p,figure,blockquote{margin:0} ul,ol{margin:0;padding:0;list-style:none} ::selection{background:var(--sand);color:var(--ink)} :focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:2px} [x-cloak]{display:none!important} /* Warm, cohesive photographic treatment across the whole site */ .img-tone{filter:saturate(.94) contrast(1.02)} /* 04. LAYOUT --------------------------------------------------------------- */ .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)} .shell-narrow{width:100%;max-width:900px;margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--section-y)} .section-sm{padding-block:clamp(52px,6vw,92px)} .section-tight{padding-block:clamp(40px,4.5vw,68px)} .rule{height:1px;width:100%;background:var(--line);border:0} .rule-dark{height:1px;width:100%;background:var(--line-dark);border:0} .surface-ink{background:var(--ink);color:var(--paper)} .surface-charcoal{background:var(--charcoal);color:var(--paper)} .surface-bone{background:var(--bone)} .surface-sand{background:var(--sand);color:var(--ink)} .surface-linen{background:var(--linen);color:var(--ink)} .surface-ink .muted,.surface-charcoal .muted,.hero .muted{color:var(--muted-dark)} .muted{color:var(--muted)} .measure{max-width:62ch} .measure-sm{max-width:46ch} /* 05. TYPOGRAPHY ----------------------------------------------------------- */ .eyebrow{ display:inline-flex;align-items:center;gap:12px; font-family:var(--font-ui);font-size:11px;font-weight:500; letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-ink); } .eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5} .eyebrow-plain::before{display:none} .surface-ink .eyebrow,.surface-charcoal .eyebrow,.on-dark .eyebrow,.hero .eyebrow{color:var(--sand)} .display{font-family:var(--font-display);font-weight:300;letter-spacing:-.028em;line-height:.98} .display-xl{font-size:clamp(2.9rem,7.4vw,6.6rem)} .display-lg{font-size:clamp(2.5rem,5.6vw,4.9rem)} .h1{font-family:var(--font-display);font-weight:300;letter-spacing:-.026em;line-height:1.02;font-size:clamp(2.2rem,4.6vw,4rem)} .h2{font-family:var(--font-display);font-weight:300;letter-spacing:-.022em;line-height:1.06;font-size:clamp(1.85rem,3.3vw,3.05rem)} .h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.016em;line-height:1.14;font-size:clamp(1.35rem,1.9vw,1.85rem)} .h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.25;font-size:clamp(1.05rem,1.25vw,1.28rem)} .accent{font-style:italic;font-weight:400;color:var(--bronze)} .surface-ink .accent,.surface-charcoal .accent,.on-dark .accent,.hero .accent{color:var(--sand)} .lead{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.62;font-weight:400;color:var(--muted)} .surface-ink .lead,.surface-charcoal .lead,.on-dark .lead,.hero .lead{color:var(--muted-dark)} .body-lg{font-size:1.0625rem;line-height:1.72} .micro{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500} .num{font-family:var(--font-display);font-weight:300;letter-spacing:-.03em;line-height:1;font-size:clamp(2.4rem,3.6vw,3.4rem)} .link-underline{position:relative;display:inline-block;padding-bottom:2px} .link-underline::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;opacity:.35;transform-origin:right;transition:transform .5s var(--ease)} .link-underline:hover::after{transform:scaleX(0)} /* 06. BUTTONS -------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; height:54px;padding:0 30px;border-radius:999px; font-family:var(--font-ui);font-size:14.5px;font-weight:500;letter-spacing:.01em; white-space:nowrap;cursor:pointer;position:relative;overflow:hidden; transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease); } .btn svg{width:16px;height:16px;transition:transform .5s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn-sm{height:44px;padding:0 22px;font-size:13.5px} .btn-lg{height:60px;padding:0 36px;font-size:15.5px} .btn-block{width:100%} .btn-primary{background:var(--sand);color:var(--ink)} .btn-primary:hover{background:var(--sand-deep)} .btn-ink{background:var(--ink);color:var(--paper)} .btn-ink:hover{background:var(--bronze);color:#fff} .btn-light{background:var(--paper);color:var(--ink)} .btn-light:hover{background:var(--linen)} .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)} .btn-ghost:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)} .btn-ghost-light{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .btn-ghost-light:hover{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--paper)} .btn-text{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;letter-spacing:.02em} .btn-text svg{width:15px;height:15px;transition:transform .5s var(--ease)} .btn-text:hover svg{transform:translateX(5px)} /* small circular arrow used on cards */ .arrow-dot{ width:42px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center; background:var(--sand);color:var(--ink-deep); transition:background .45s var(--ease),color .45s var(--ease) } .arrow-dot svg{width:15px;height:15px;transition:transform .5s var(--ease)} .group:hover .arrow-dot{background:var(--ink-deep);color:var(--sand)} .group:hover .arrow-dot svg{transform:translateX(3px)} /* badges & trust chips */ .badge{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;font-size:12px;letter-spacing:.06em;font-weight:500;box-shadow:inset 0 0 0 1px var(--line)} .badge-dark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:var(--paper)} .badge svg{width:14px;height:14px;color:var(--sand)} /* 07. HEADER --------------------------------------------------------------- */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:60; transition:background .5s var(--ease),box-shadow .5s var(--ease),color .5s var(--ease); background:transparent;color:var(--paper); } .site-header::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,9,9,.55),rgba(10,9,9,0)); opacity:1;transition:opacity .5s var(--ease); } .site-header.is-solid{background:var(--sand);color:var(--ink-deep);box-shadow:0 1px 0 rgba(11,3,2,.16)} /* on gold the sand CTA would disappear — flip it to ink */ .site-header.is-solid .btn-primary{background:var(--ink-deep);color:var(--sand)} .site-header.is-solid .btn-primary:hover{background:var(--ink)} .site-header.is-solid .mega{box-shadow:0 40px 80px -50px rgba(11,3,2,.65)} .site-header.is-solid::before{opacity:0} .site-header.is-static{position:sticky;background:var(--sand);color:var(--ink-deep);box-shadow:0 1px 0 rgba(11,3,2,.16)} .site-header.is-static::before{opacity:0} .header-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;height:var(--header-h)} .nav-link{ position:relative;display:inline-flex;align-items:center;gap:6px; font-size:14.5px;font-weight:400;letter-spacing:.005em;color:currentColor;opacity:.86; transition:opacity .35s var(--ease) } .nav-link:hover{opacity:1} .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .nav-link:hover::after,.nav-link.is-current::after{transform:scaleX(1)} .nav-caret{width:11px;height:11px;transition:transform .4s var(--ease)} .nav-item.is-open .nav-caret{transform:rotate(180deg)} .mega{ position:absolute;top:calc(100% + 10px);left:0;z-index:70; width:880px;max-width:calc(100vw - 48px);background:var(--paper);color:var(--ink); border:1px solid var(--line-soft);border-radius:4px; box-shadow:0 40px 80px -50px rgba(21,20,20,.55); padding:26px; } .mega-link{display:flex;align-items:flex-start;gap:14px;padding:12px 14px;border-radius:3px;transition:background .35s var(--ease)} .mega-link:hover{background:var(--bone)} .mega-link .t{font-size:14.5px;font-weight:500} .mega-link .d{font-size:12.5px;color:var(--muted);line-height:1.5;display:block;max-width:30ch} .mega-areas{width:620px} .mega-index{font-family:var(--font-display);font-size:12px;color:var(--bronze-ink);padding-top:3px;min-width:20px} .drawer{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);overflow-y:auto} .drawer-link{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line-dark);font-family:var(--font-display);font-size:1.5rem;font-weight:300;letter-spacing:-.02em} .drawer-sub{display:block;padding:11px 0 11px 18px;font-size:15px;color:var(--muted-dark)} .drawer-sub:hover{color:var(--sand)} .burger{width:44px;height:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px} /* Header responsive behaviour. These live here rather than as Tailwind `hidden md:flex` utilities: the elements also carry component classes that set `display`, and which of the two wins depends on stylesheet order. Keeping both rules in this file makes the breakpoints deterministic. */ .primary-nav{display:none} .nav-phone{display:none} .btn-header{display:none} .call-dot{ display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px; border-radius:999px;background:var(--sand);color:var(--ink-deep); transition:background .35s var(--ease),color .35s var(--ease) } .call-dot svg{width:16px;height:16px} .call-dot:hover{background:var(--sand-deep)} .site-header.is-solid .call-dot{background:var(--ink-deep);color:var(--sand)} .site-header.is-solid .call-dot:hover{background:var(--ink)} @media(min-width:640px){.btn-header{display:inline-flex}} @media(min-width:1024px){.nav-phone{display:inline-flex}.call-dot{display:none}} @media(min-width:1280px){.primary-nav{display:flex}.burger{display:none}} .burger i{display:block;width:20px;height:1.4px;background:currentColor;transition:transform .4s var(--ease),opacity .3s var(--ease)} /* 08. MEDIA ---------------------------------------------------------------- */ .media{position:relative;overflow:hidden;border-radius:3px;background:var(--stone)} .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);filter:saturate(.94) contrast(1.02)} .zoom:hover img,.group:hover .zoom img{transform:scale(1.045)} .ratio-1{aspect-ratio:1/1}.ratio-43{aspect-ratio:4/3}.ratio-32{aspect-ratio:3/2} .ratio-169{aspect-ratio:16/9}.ratio-34{aspect-ratio:3/4}.ratio-45{aspect-ratio:4/5}.ratio-219{aspect-ratio:21/9} .scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,9,.15) 0%,rgba(10,9,9,.05) 38%,rgba(10,9,9,.72) 100%)} .scrim-strong::after{background:linear-gradient(180deg,rgba(10,9,9,.55) 0%,rgba(10,9,9,.35) 45%,rgba(10,9,9,.86) 100%)} .scrim-side::after{background:linear-gradient(90deg,rgba(10,9,9,.78) 0%,rgba(10,9,9,.42) 48%,rgba(10,9,9,.18) 100%)} /* Hero */ .hero{position:relative;min-height:min(94vh,940px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:var(--paper)} .hero-media{position:absolute;inset:0} .hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03) brightness(.94);animation:heroIn 2.4s var(--ease) both} @keyframes heroIn{from{transform:scale(1.08)}to{transform:scale(1)}} .hero-inner{position:relative;z-index:2;width:100%;padding-block:clamp(48px,7vw,96px)} .hero-page{min-height:min(62vh,620px);align-items:flex-end} .scroll-cue{width:1px;height:56px;background:linear-gradient(180deg,rgba(251,249,246,0),rgba(251,249,246,.8))} /* 09. CARDS ---------------------------------------------------------------- */ .card{background:var(--paper);border:1px solid var(--line-soft);border-radius:4px;overflow:hidden;transition:border-color .5s var(--ease),transform .5s var(--ease)} .card:hover{border-color:var(--line)} .card-dark{background:var(--charcoal);border-color:var(--line-dark);color:var(--paper)} .card-pad{padding:clamp(22px,2.4vw,34px)} /* Service card — image flush to the top edge, one padding box for everything else, footer pinned to the bottom so a row of cards ends on the same line. */ .card-grid{display:grid;gap:clamp(18px,1.8vw,28px);grid-template-columns:1fr} @media(min-width:700px){.card-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){.card-grid{grid-template-columns:repeat(3,1fr)}} .service-card{ display:flex;flex-direction:column;height:100%;overflow:hidden; background:var(--paper);border:1px solid var(--line-soft);border-radius:4px; transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease); } .service-card:hover{border-color:var(--line);box-shadow:0 32px 60px -46px rgba(21,20,20,.45);transform:translateY(-3px)} .service-card-media{display:block;position:relative;border-radius:0;flex:0 0 auto} .service-card-index{ position:absolute;left:14px;top:12px;z-index:2; display:inline-flex;align-items:center;justify-content:center; min-width:30px;height:24px;padding:0 8px;border-radius:999px; background:rgba(10,9,9,.55);backdrop-filter:blur(4px); font-family:var(--font-display);font-size:11px;letter-spacing:.12em; color:var(--paper); } .service-card-body{ display:flex;flex-direction:column;flex:1 1 auto; padding:clamp(22px,1.9vw,30px); } .service-card-title{ font-family:var(--font-display);font-weight:400;letter-spacing:-.016em;line-height:1.16; font-size:clamp(1.28rem,1.6vw,1.6rem);margin:0; } .service-card-text{ display:block;flex:1 1 auto;margin-top:14px; font-size:14.5px;line-height:1.65;color:var(--muted); } .service-card-foot{ display:flex;align-items:center;justify-content:space-between;gap:16px; margin-top:clamp(20px,1.8vw,26px);padding-top:clamp(16px,1.4vw,20px); border-top:1px solid var(--line-soft); } .service-card-foot .btn-text{color:var(--ink);transition:color .4s var(--ease)} .service-card:hover .service-card-foot .btn-text{color:var(--bronze)} @media(min-width:1100px){ /* keep two-line titles from pushing body copy out of alignment across a row */ .service-card-title{min-height:2.32em} } .tile-list{border-top:1px solid var(--line)} .tile{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--line);transition:background .5s var(--ease),padding-inline .5s var(--ease)} .tile:hover{background:var(--bone);padding-inline:clamp(10px,1.4vw,22px)} .tile-index{font-family:var(--font-display);font-size:13px;letter-spacing:.06em;color:var(--bronze-ink);width:34px} .step{position:relative;padding-top:26px;border-top:1px solid var(--line)} /* Body copy inside steps, extras and stats. Defined once and flipped on dark surfaces, so the same component is legible on paper, bone, ink and charcoal without the calling page choosing a colour. */ .step-text{margin-top:12px;font-size:15px;line-height:1.66;color:var(--muted);max-width:34ch} .stat-label{margin-top:12px;font-size:14px;line-height:1.55;color:var(--muted);max-width:24ch} .surface-ink .step-text,.surface-charcoal .step-text,.on-dark .step-text,.hero .step-text, .surface-ink .stat-label,.surface-charcoal .stat-label,.on-dark .stat-label,.hero .stat-label{color:var(--muted-dark)} .step-num{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;color:var(--bronze-ink);margin-bottom:16px;display:block} .surface-ink .step,.surface-charcoal .step{border-color:var(--line-dark)} .surface-ink .step-num,.surface-charcoal .step-num{color:var(--sand)} .stat{padding:clamp(20px,2vw,28px) 0} .stat .num{color:var(--ink)} .surface-ink .stat .num,.surface-charcoal .stat .num{color:var(--paper)} .stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)} .stat-grid>*{border-bottom:1px solid var(--line);padding:clamp(22px,2.4vw,34px) clamp(14px,2vw,28px)} .stat-grid>*:nth-child(odd){border-right:1px solid var(--line)} @media(min-width:900px){ .stat-grid{grid-template-columns:repeat(4,1fr)} .stat-grid>*{border-right:1px solid var(--line);border-bottom:0} .stat-grid>*:last-child{border-right:0} } .surface-ink .stat-grid,.surface-ink .stat-grid>*,.surface-charcoal .stat-grid,.surface-charcoal .stat-grid>*{border-color:var(--line-dark)} .quote-card{display:flex;flex-direction:column;gap:26px;height:100%;padding:clamp(26px,3vw,42px);background:var(--paper);border:1px solid var(--line-soft);border-radius:4px} .quote-mark{font-family:var(--font-display);font-size:56px;line-height:.7;color:var(--bronze)} .surface-ink .quote-mark,.surface-charcoal .quote-mark,.form-panel .quote-mark{color:var(--sand)} .avatar{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--linen);color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.04em} .area-card{position:relative;display:block;overflow:hidden;border-radius:3px;background:var(--ink)} .area-card img{transition:transform 1.6s var(--ease),opacity .6s var(--ease);opacity:.72} .area-card:hover img{transform:scale(1.06);opacity:.55} .area-card-body{position:absolute;inset:auto 0 0 0;padding:clamp(20px,2vw,30px);color:var(--paper);z-index:2} .feature-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.55} .feature-list li:last-child{border-bottom:0} .feature-list .ico{flex:0 0 auto;width:18px;height:18px;margin-top:3px;color:var(--bronze)} .surface-ink .feature-list li,.surface-charcoal .feature-list li{border-color:var(--line-dark)} .surface-ink .feature-list .ico,.surface-charcoal .feature-list .ico{color:var(--sand)} /* 10. FORMS ---------------------------------------------------------------- */ /* Quote panel — the one branded-black surface on a light page. Field styles below stay light for inline forms (the hero quote bar); everything inside .form-panel is re-scoped to the dark treatment. */ .form-panel{ background:var(--ink);color:var(--paper);color-scheme:dark; border:1px solid rgba(234,206,169,.16);border-radius:4px; padding:clamp(26px,2.6vw,40px); box-shadow:0 60px 110px -70px rgba(21,20,20,.75); } .form-panel .eyebrow{color:var(--sand)} .form-panel .label{color:var(--muted-dark)} .form-panel .form-note,.form-panel .text-muted{color:rgba(234,206,169,.66)} .form-panel .text-bronze{color:var(--sand)} .form-panel .input,.form-panel .select,.form-panel .textarea{ background-color:rgba(255,255,255,.045);border-color:rgba(234,206,169,.2);color:var(--paper); } .form-panel .input::placeholder,.form-panel .textarea::placeholder{color:rgba(251,249,246,.34)} .form-panel .input:focus,.form-panel .select:focus,.form-panel .textarea:focus{ background-color:rgba(255,255,255,.07);border-color:var(--sand);box-shadow:0 0 0 3px rgba(215,165,105,.24); } .form-panel .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23EACEA9' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")} .form-panel .select option{background:var(--ink);color:var(--paper)} .form-panel .btn-ghost{color:var(--paper);box-shadow:inset 0 0 0 1px rgba(234,206,169,.28)} .form-panel .btn-ghost:hover{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--paper)} .form-panel .rule,.form-panel hr{background:rgba(234,206,169,.16)} .field{display:flex;flex-direction:column;gap:8px} .label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--muted)} .input,.select,.textarea{ width:100%;height:52px;padding:0 16px;background:#fff;color:var(--ink); border:1px solid var(--line);border-radius:3px;font-family:var(--font-ui);font-size:15px; transition:border-color .4s var(--ease),box-shadow .4s var(--ease);appearance:none } .textarea{height:auto;padding:14px 16px;min-height:118px;resize:vertical} .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6862' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px} .input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--sand);box-shadow:0 0 0 3px rgba(215,165,105,.18)} .input::placeholder,.textarea::placeholder{color:#A8A29B} .form-note{font-size:12.5px;color:var(--muted);line-height:1.6} .link-brand{color:var(--bronze-ink)} .form-error{color:var(--bronze-ink)} .form-panel .link-brand,.form-panel .form-error{color:var(--sand)} .surface-ink .link-brand,.surface-charcoal .link-brand,.hero .link-brand{color:var(--sand)} code.code-brand{color:var(--bronze-ink);font-size:.94em} .form-success{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:3px;background:rgba(215,165,105,.14);border:1px solid rgba(215,165,105,.4);font-size:14px} /* 11. ACCORDION ------------------------------------------------------------ */ .accordion-item{border-bottom:1px solid var(--line)} .accordion-btn{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:24px;padding:26px 0;text-align:left} .accordion-title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.32rem);letter-spacing:-.012em;line-height:1.35} .accordion-icon{ flex:0 0 auto;width:36px;height:36px;border-radius:999px;display:grid;place-items:center; background:var(--sand);color:var(--ink-deep); transition:background .45s var(--ease),transform .45s var(--ease),color .45s var(--ease); } .accordion-icon svg{width:14px;height:14px} .accordion-btn:hover .accordion-icon{background:var(--sand-deep)} .accordion-item.is-open .accordion-icon{background:var(--sand);transform:rotate(180deg)} .accordion-panel{overflow:hidden;max-height:0;transition:max-height .55s var(--ease),opacity .45s var(--ease);opacity:0} .accordion-item.is-open .accordion-panel{max-height:520px;opacity:1} .accordion-panel .inner{padding-bottom:26px;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:70ch} /* 12. FOOTER --------------------------------------------------------------- */ .site-footer{background:var(--ink);color:var(--paper)} .footer-link{font-size:14.5px;color:var(--muted-dark);transition:color .35s var(--ease)} .footer-link:hover{color:var(--sand)} .footer-head{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);opacity:.55;margin-bottom:20px} .footer-wordmark{color:var(--sand);opacity:.16;width:100%;height:auto} /* 13. MOTION & UTILITIES --------------------------------------------------- */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)} [data-reveal].is-in{opacity:1;transform:none} [data-reveal="fade"]{transform:none} [data-reveal="mask"]{clip-path:inset(0 0 100% 0);opacity:1;transform:none;transition:clip-path 1.1s var(--ease)} [data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} [data-reveal]{opacity:1;transform:none;clip-path:none} } .marquee{display:flex;overflow:hidden;gap:0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;align-items:center;gap:clamp(28px,4vw,64px);padding-right:clamp(28px,4vw,64px);animation:marquee 38s linear infinite;flex:0 0 auto} @keyframes marquee{to{transform:translateX(-100%)}} .marquee:hover .marquee-track{animation-play-state:paused} .divider-dot{width:4px;height:4px;border-radius:999px;background:currentColor;opacity:.4} /* Swiper overrides */ .swiper{overflow:visible} .swiper-slide{height:auto} .swiper-pagination-bullet{background:var(--ink);opacity:.18;width:6px;height:6px;transition:opacity .4s,width .4s} .swiper-pagination-bullet-active{background:var(--sand);opacity:1;width:22px;border-radius:999px} .slider-nav{display:inline-flex;gap:10px} .slider-btn{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)} .slider-btn:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)} .slider-btn.is-disabled{opacity:.32;pointer-events:none} .surface-ink .slider-btn,.surface-charcoal .slider-btn{box-shadow:inset 0 0 0 1px var(--line-dark);color:var(--paper)} .surface-ink .slider-btn:hover,.surface-charcoal .slider-btn:hover{background:var(--sand);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sand)} /* Film band — full-bleed muted loop behind the copy */ .film-band{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);isolation:isolate} .film-band-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.72) contrast(1.06) brightness(.92)} .film-band-scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(10,9,9,.92) 0%,rgba(10,9,9,.72) 42%,rgba(10,9,9,.30) 100%), linear-gradient(180deg,rgba(10,9,9,.45),rgba(10,9,9,.25) 40%,rgba(10,9,9,.70)); } @media(max-width:768px){ .film-band-scrim{background:linear-gradient(180deg,rgba(10,9,9,.62),rgba(10,9,9,.80))} } /* Video tiles inside the work slider */ .tile-video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.86) contrast(1.06) brightness(.97)} .media .tile-video{position:relative;z-index:0} .is-playing .play-badge{opacity:0} .play-badge{transition:opacity .4s var(--ease)} /* Play badge on video tiles */ .play-badge{ position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none; background:linear-gradient(180deg,rgba(10,9,9,.10),rgba(10,9,9,.34)); } .play-badge svg{ width:58px;height:58px;padding:16px;border-radius:999px; background:var(--sand);color:var(--ink-deep); transition:background .45s var(--ease),transform .45s var(--ease); } .group:hover .play-badge svg{background:var(--ink-deep);color:var(--sand);transform:scale(1.06)} @media(max-width:640px){.play-badge svg{width:46px;height:46px;padding:13px}} /* Lightbox */ .lightbox{position:fixed;inset:0;z-index:90;background:rgba(10,9,9,.94);display:grid;place-items:center;padding:clamp(16px,4vw,56px)} .lightbox img,.lightbox video{max-height:86vh;max-width:100%;width:auto;border-radius:3px;background:#000} .lightbox video{outline:none} /* Breadcrumb */ .crumbs{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.04em} .crumbs a{opacity:.7;transition:opacity .3s} .crumbs a:hover{opacity:1} /* Sticky in-page aside */ .sticky-aside{position:sticky;top:calc(var(--header-h) + 28px)} /* Print */ @media print{.site-header,.drawer,.lightbox{display:none!important}body{background:#fff}} /* --- Brand mark ------------------------------------------------------------- assets/img/shiftly-logo.svg is inlined once per page as