/* ========================================================================== YORVIK SHARJITH SHAANK — 3D CINEMATIC PORTFOLIO HTML5 + CSS3 only. Depth comes from real CSS 3D transforms: perspective, preserve-3d, translateZ, rotateX/Y — no libraries. ---------------------------------------------------------------------- 01 Palette & reset 06 Coverflow (25 frames) 02 3D primitives 07 Cards · slabs · players 03 Typography 08 Gallery · flips · contact 04 Buttons & chips 09 Overlays 05 Intro · header · hero 10 Responsive · motion · A4 print ========================================================================== */ /* ========================================================================== 01. PALETTE & RESET ========================================================================== */ :root{ /* ---- the supplied palette, unchanged ---- */ --silver: #c0c0c0; /* text / icons */ --gold: #d4af37; /* PRIMARY accent */ /* the accent again, as three numbers, because the sheet needs it at a dozen different alphas for glows, rings and hairlines. A theme that restates the accent restates this with it, and every one of those follows - which is how the light theme came to be full of gold glows long after its accent had stopped being gold. */ --accent-rgb: 212,175,55; /* the divider star, whose fill is sealed inside a data URI - so the url() itself is the token and a theme restates the whole of it */ --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.8L21.5 11l-6.9 2.2L12 20l-2.6-6.8L2.5 11l6.9-2.2z' fill='%23d4af37'/%3E%3C/svg%3E"); --green: #0b1f1a; /* BLACK GREEN — bg */ --navy: #0d1b3d; /* SECONDARY accent */ --white: #ffffff; /* neutral / light */ --red: #b71c1c; /* HIGHLIGHT / CTA */ /* ---- derived surfaces ---- */ --black: #050f0c; --card: #12302a; --card-hi: #1a4038; --sunk: #0a201a; --gold-lt: #f0d98a; --gold-dk: #96741f; --gold-metal: linear-gradient(158deg,#f2dc8e 0%,#d4af37 46%,#9c7c26 100%); /* the ink written ON the metal, and the hard rim it stands on — both belong to the metal, so a theme that restates the metal restates these with it rather than leaving a warm edge under a cool face */ --metal-ink: #1a1405; --metal-rim: #6f5416; --ink: var(--white); --soft: rgba(255,255,255,.7); --mute: rgba(192,192,192,.55); --hair: rgba(var(--accent-rgb),.32); --hairw:rgba(255,255,255,.12); /* ---- type ---- */ --fd: 'Syne', 'Segoe UI', Arial, sans-serif; /* display */ --fb: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; /* ---- metrics ---- */ --wrap: 1300px; --gut: 28px; --hh: 74px; --r: 18px; /* ---- 3D ---- */ --persp: 1100px; /* ---- motion ---- */ --e: cubic-bezier(.22,.61,.36,1); --eo: cubic-bezier(.16,1,.3,1); --spring: cubic-bezier(.34,1.56,.64,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:var(--hh); -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--black); color:var(--ink); font-family:var(--fb); font-size:16px; line-height:1.72; font-weight:300; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body.lock-init,body.lock{ overflow:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; margin:0; padding:0; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } input,select,textarea{ font:inherit; color:inherit; } h1,h2,h3,p,dl,dd,figure{ margin:0; } ::selection{ background:var(--gold); color:var(--black); } :focus-visible{ outline:2px solid var(--gold); outline-offset:4px; } ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#040b09; } ::-webkit-scrollbar-thumb{ background:var(--card-hi); border-radius:8px; } ::-webkit-scrollbar-thumb:hover{ background:var(--gold-dk); } svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .ico{ width:16px; height:16px; flex:none; } /* a name a screen reader reads but the eye does not — the profile marks carry theirs this way, so the row stays a row of glyphs */ .vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .ys{ width:100%; height:100%; color:var(--gold); } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); } /* ========================================================================== 02. 3D PRIMITIVES Every depth effect on the page is built from these three things. ========================================================================== */ /* a perspective container — children can sit at real depths */ .scene{ perspective:var(--persp); perspective-origin:50% 40%; } /* a surface that tilts toward the pointer. JS writes --rx / --ry. */ .tilt{ --rx:0deg; --ry:0deg; --tz:0px; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz)); transition:transform .5s var(--eo), box-shadow .5s var(--e); will-change:transform; } .tilt.live{ transition:transform .12s linear, box-shadow .4s var(--e); } /* raised panel: layered shadow reads as physical thickness */ .raise{ background:linear-gradient(158deg,var(--card-hi),var(--card)); border:1px solid var(--hair); border-radius:var(--r); box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 2px 0 #071612, 0 4px 0 #061310, 0 8px 0 #04100d, 0 26px 40px -14px rgba(0,0,0,.85); } /* soft coloured light behind a 3D object */ .glow{ position:absolute; inset:8% 6%; z-index:-1; border-radius:50%; filter:blur(48px); opacity:.5; pointer-events:none; } /* scroll reveal, entering through depth rather than sliding */ .rv{ opacity:0; transform:perspective(900px) translateY(34px) translateZ(-90px) rotateX(7deg); transition:opacity .9s var(--eo), transform 1s var(--eo); } .rv.on{ opacity:1; transform:none; } .rv[data-d="1"]{ transition-delay:.1s; } .rv[data-d="2"]{ transition-delay:.2s; } .rv[data-d="3"]{ transition-delay:.3s; } .rv[data-d="4"]{ transition-delay:.4s; } .rv[data-d="5"]{ transition-delay:.5s; } /* placeholder plate for photographs not yet supplied */ img.ph{ object-fit:contain !important; filter:none !important; opacity:1 !important; background:var(--green); min-height:110px; } img.ph--bg{ object-fit:cover !important; min-height:0 !important; } /* ========================================================================== 03. TYPOGRAPHY ========================================================================== */ .sec{ position:relative; padding:clamp(80px,10vw,148px) 0; overflow:hidden; } .sec--flat{ padding-top:0; } .sec--green { background:var(--green); } .sec--deep { background:linear-gradient(180deg,#0d2620 0%,var(--black) 100%); } .sec--red { background:linear-gradient(168deg,#0d0505 0%,#21090a 50%,#0d0505 100%); } .sec--forest{ background:linear-gradient(168deg,#061410 0%,#14332c 50%,#061410 100%); } .sec--navy { background:linear-gradient(168deg,#060c18 0%,#101f45 52%,#060c18 100%); } .sec--white { background:var(--white); color:var(--green); } /* section seam: a gold rule broken by a star */ .sec::before{ content:''; position:absolute; top:0; left:0; right:0; height:14px; z-index:4; background: var(--star) center / 12px 12px no-repeat, linear-gradient(90deg,transparent 0%,var(--hair) 18%,var(--hair) 47%, transparent 47.5%,transparent 52.5%,var(--hair) 53%,var(--hair) 82%,transparent 100%) center / 100% 1px no-repeat; } .sec[data-code]::after{ content:attr(data-code); position:absolute; right:var(--gut); top:28px; z-index:4; font-size:.56rem; font-weight:600; letter-spacing:.32em; color:var(--gold); opacity:.55; } .sec--white[data-code]::after{ color:var(--gold-dk); opacity:.85; } /* --- the extruded 3D heading: layered shadows build real depth --- */ .h3d{ font-family:var(--fd); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:.95; color:var(--white); text-shadow: 1px 1px 0 #b4952f, 2px 2px 0 #a0862a, 3px 3px 0 #8c7625, 4px 4px 0 #786520, 5px 5px 0 #64541b, 6px 6px 0 #504416, 7px 7px 0 #3c3311, 8px 8px 14px rgba(0,0,0,.6), 0 0 42px rgba(var(--accent-rgb),.22); } .h3d--dark{ color:var(--green); text-shadow: 1px 1px 0 #c9a94a, 2px 2px 0 #b99a3f, 3px 3px 0 #a98b35, 4px 4px 0 #997c2b, 5px 5px 0 #896d22, 6px 6px 10px rgba(11,31,26,.3); } .ttl{ font-size:clamp(1.9rem,4.6vw,3.9rem); overflow-wrap:break-word; } .eyebrow{ display:flex; align-items:center; gap:11px; font-size:.62rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; } .eyebrow i{ width:26px; height:2px; background:var(--gold); border-radius:2px; flex:none; } .sec--white .eyebrow{ color:var(--gold-dk); } .sec--white .eyebrow i{ background:var(--gold-dk); } .lede{ color:var(--soft); font-size:1.03rem; max-width:56ch; margin-top:18px; } .sec--white .lede{ color:rgba(11,31,26,.7); } .sh{ margin-bottom:clamp(36px,5vw,60px); } .sh--mid{ text-align:center; } .sh--mid .eyebrow{ justify-content:center; } .sh--mid .lede{ margin-inline:auto; } .sh--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; } .sh--split .lede{ margin-top:0; max-width:32ch; } .sh__side{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; } /* PROFILE MARKS — five ways to carry on watching once the reel runs out. Each is a plain link the size of a thumb, so the row works on a phone. */ .soci{ display:flex; flex-wrap:wrap; gap:10px; } .soci__a{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--soft); background:rgba(255,255,255,.05); border:1px solid var(--hairw); box-shadow:0 2px 0 rgba(0,0,0,.4); transition:color .3s var(--e), border-color .3s var(--e), transform .3s var(--e), box-shadow .3s var(--e); } .soci__a .ico{ width:19px; height:19px; } .soci__a:hover, .soci__a:focus-visible{ color:var(--gold); border-color:var(--gold); transform:translateY(-3px); box-shadow:0 5px 0 rgba(0,0,0,.4); } .mini{ font-size:.58rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--mute); margin-bottom:14px; } .note{ margin-top:32px; text-align:center; font-size:.72rem; letter-spacing:.14em; color:var(--mute); } .none{ text-align:center; color:var(--mute); padding:48px 0; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; } .duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(30px,5vw,70px); align-items:center; } .duo--rev{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } /* ========================================================================== 04. BUTTONS & 3D CHIPS ========================================================================== */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; min-height:48px; border:1px solid var(--hair); border-radius:12px; font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); cursor:pointer; transform-style:preserve-3d; transition:transform .3s var(--spring), box-shadow .3s var(--e), background .3s var(--e), color .3s var(--e); box-shadow:0 3px 0 rgba(0,0,0,.55), 0 10px 20px -8px rgba(0,0,0,.7); } .btn:hover{ transform:translateY(-3px) translateZ(12px); box-shadow:0 6px 0 rgba(0,0,0,.55), 0 18px 30px -10px rgba(0,0,0,.8); } .btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.55); } .btn--gold{ background:var(--gold-metal); border-color:var(--gold-lt); color:var(--metal-ink); box-shadow:0 3px 0 var(--metal-rim), 0 12px 24px -8px rgba(var(--accent-rgb),.4); } .btn--gold:hover{ box-shadow:0 6px 0 var(--metal-rim), 0 20px 32px -10px rgba(var(--accent-rgb),.5); } .btn--navy{ background:linear-gradient(158deg,#1a2f60,var(--navy)); border-color:#2a4a9e; color:var(--white); box-shadow:0 3px 0 #050b18, 0 12px 24px -8px rgba(13,27,61,.9); } .btn--navy:hover{ box-shadow:0 6px 0 #050b18, 0 20px 32px -10px rgba(42,74,158,.5); } .btn--red{ background:linear-gradient(158deg,#d32626,var(--red)); border-color:#e04a4a; color:var(--white); box-shadow:0 3px 0 #5c0e0e, 0 12px 24px -8px rgba(183,28,28,.6); } .btn--red:hover{ box-shadow:0 6px 0 #5c0e0e, 0 20px 32px -10px rgba(183,28,28,.7); } .btn--dark{ background:linear-gradient(158deg,var(--card-hi),var(--green)); border-color:var(--green); color:var(--white); box-shadow:0 3px 0 rgba(11,31,26,.5), 0 12px 24px -8px rgba(11,31,26,.6); } .btn--ghost{ background:rgba(255,255,255,.04); border-color:var(--hairw); } .btn--sm{ padding:11px 18px; min-height:44px; font-size:.6rem; letter-spacing:.16em; } .btn--full{ width:100%; } .btn.sending{ pointer-events:none; opacity:.6; } /* --- 3D chip: a small extruded tile --- */ .chip3d{ position:relative; display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:12px 18px; border-radius:12px; background:linear-gradient(158deg,var(--card-hi),var(--card)); border:1px solid var(--hair); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 3px 0 #071612, 0 10px 18px -8px rgba(0,0,0,.8); transition:transform .3s var(--spring), box-shadow .3s var(--e), background .3s var(--e); } .chip3d:hover{ transform:translateY(-4px) translateZ(16px) rotateX(-6deg); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 7px 0 #071612, 0 20px 28px -10px rgba(0,0,0,.85); } .chip3d b{ font-family:var(--fd); font-size:1.35rem; font-weight:800; letter-spacing:0; color:var(--gold); line-height:1; text-transform:none; } .chip3d b i{ font-style:normal; font-size:.5em; margin-left:2px; color:var(--mute); } .chip3d span{ font-size:.55rem; font-weight:600; letter-spacing:.2em; color:var(--mute); } .chip3d i{ font-style:normal; font-size:.55rem; letter-spacing:.18em; color:var(--gold); } .chip3d--red { background:linear-gradient(158deg,#3a1113,#1e0809); border-color:rgba(183,28,28,.6); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 3px 0 #120404, 0 10px 18px -8px rgba(0,0,0,.8); } .chip3d--red:hover{ background:linear-gradient(158deg,#5a1a1d,#2c0d0e); } .chip3d--green{ background:linear-gradient(158deg,#1c4a3e,#0e2a23); border-color:rgba(47,107,88,.7); } .chip3d--navy { background:linear-gradient(158deg,#1a2f60,#0a142e); border-color:rgba(42,74,158,.7); } .chip3d--dark { background:linear-gradient(158deg,#173a32,var(--green)); border-color:rgba(11,31,26,.4); color:var(--white); box-shadow:0 3px 0 rgba(11,31,26,.35), 0 10px 18px -8px rgba(11,31,26,.4); } .range{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; } .range .chip3d{ flex-direction:row; align-items:baseline; gap:8px; } .fil{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; } .fb{ padding:10px 18px; min-height:44px; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid var(--hairw); color:var(--soft); font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; box-shadow:0 2px 0 rgba(0,0,0,.5); transition:all .3s var(--e); } .fb:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); } .fb.on{ background:var(--gold-metal); border-color:var(--gold-lt); color:var(--metal-ink); box-shadow:0 3px 0 var(--metal-rim); } .rnd{ width:50px; height:50px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--soft); background:linear-gradient(158deg,var(--card-hi),var(--card)); border:1px solid var(--hair); box-shadow:0 3px 0 #071612, 0 10px 18px -8px rgba(0,0,0,.8); transition:all .3s var(--spring); } .rnd:hover{ background:var(--gold-metal); color:var(--metal-ink); transform:translateY(-3px); } .rnd .ico{ width:20px; height:20px; } /* ========================================================================== 05. INTRO · HEADER · HERO ========================================================================== */ .intro{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 40%,#12302a,var(--black) 70%); text-align:center; padding:28px; transition:opacity .9s var(--e), visibility .9s var(--e); } .intro.gone{ opacity:0; visibility:hidden; } .intro__box{ display:grid; justify-items:center; gap:14px; } /* --- the rotating YS cube --- */ .cubewrap{ perspective:800px; width:130px; height:130px; margin-bottom:14px; } .cube{ position:relative; width:130px; height:130px; transform-style:preserve-3d; animation:spin 14s linear infinite; } @keyframes spin{ 0% { transform:rotateX(-18deg) rotateY(0deg); } 100%{ transform:rotateX(-18deg) rotateY(360deg); } } .cube__f{ position:absolute; inset:0; display:grid; place-items:center; border:1px solid var(--hair); border-radius:10px; background:linear-gradient(158deg,rgba(26,64,56,.9),rgba(11,31,26,.92)); box-shadow:0 0 34px rgba(var(--accent-rgb),.15) inset; font-family:var(--fd); font-weight:800; font-size:2rem; color:var(--gold); letter-spacing:.06em; } .cube__f svg{ width:64%; height:64%; } .cube__f--fr{ transform:translateZ(65px); } .cube__f--bk{ transform:rotateY(180deg) translateZ(65px); } .cube__f--ri{ transform:rotateY(90deg) translateZ(65px); } .cube__f--le{ transform:rotateY(-90deg) translateZ(65px); } .cube__f--tp{ transform:rotateX(90deg) translateZ(65px); background:linear-gradient(158deg,#1c4a3e,#0e2a23); } .cube__f--bt{ transform:rotateX(-90deg) translateZ(65px); background:linear-gradient(158deg,#0a1c17,#050f0c); } .intro__name{ font-size:clamp(2.4rem,8vw,4.6rem); } .intro__sub { font-size:.72rem; font-weight:600; letter-spacing:.42em; color:var(--gold); } .intro__role{ font-size:.58rem; font-weight:600; letter-spacing:.3em; color:var(--mute); } .intro__btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:16px; } .intro__loc { font-size:.55rem; letter-spacing:.3em; color:var(--mute); margin-top:6px; } .prog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:1000; background:var(--gold-metal); box-shadow:0 0 12px rgba(var(--accent-rgb),.7); } .hdr{ position:fixed; inset:0 0 auto 0; z-index:900; height:var(--hh); display:flex; align-items:center; border-bottom:1px solid transparent; transition:background .4s var(--e), height .4s var(--e), border-color .4s var(--e); } .hdr.stuck{ height:62px; background:rgba(11,31,26,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--hair); box-shadow:0 10px 30px -12px rgba(0,0,0,.9); } .hdr__in{ display:flex; align-items:center; gap:20px; } .logo{ display:flex; align-items:center; gap:12px; margin-right:auto; } .logo__cube{ width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:10px; border:1px solid var(--hair); background:linear-gradient(158deg,var(--card-hi),var(--card)); box-shadow:0 3px 0 #071612, 0 8px 16px -6px rgba(0,0,0,.8); transition:transform .45s var(--spring); } .logo__cube svg{ width:66%; height:66%; } .logo:hover .logo__cube{ transform:rotateY(180deg); } .logo__t{ display:flex; flex-direction:column; line-height:1.2; font-family:var(--fd); font-weight:800; font-size:.95rem; letter-spacing:.1em; } .logo__t em{ font-family:var(--fb); font-style:normal; font-size:.5rem; font-weight:600; letter-spacing:.28em; color:var(--gold); } .nav ul{ display:flex; align-items:center; gap:22px; } .nav__a{ position:relative; padding:6px 0; font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); transition:color .3s var(--e); } .nav__a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold); border-radius:2px; transition:width .35s var(--e); } .nav__a:hover,.nav__a.on{ color:var(--ink); } .nav__a:hover::after,.nav__a.on::after{ width:100%; } .snd,.thm{ width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center; border:1px solid var(--hairw); color:var(--soft); background:rgba(255,255,255,.04); box-shadow:0 2px 0 rgba(0,0,0,.5); transition:all .3s var(--e); } .snd:hover,.snd[aria-pressed="true"], .thm:hover,.thm:focus-visible{ border-color:var(--gold); color:var(--gold); } /* the icon turns as the theme changes — sun for the light it will switch to, moon for the dark it will switch back to */ .thm .ico{ transition:transform .5s var(--spring); } .thm:hover .ico{ transform:rotate(28deg); } .brg{ display:none; width:44px; height:44px; padding:12px; } .brg span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .4s var(--e), opacity .25s var(--e), width .4s var(--e); } .brg span + span{ margin-top:6px; } .brg span:nth-child(2){ width:66%; margin-left:auto; } .brg.on span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .brg.on span:nth-child(2){ opacity:0; } .brg.on span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } /* --- hero --- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:calc(var(--hh) + 40px) 0 clamp(74px,11vh,116px); background: radial-gradient(ellipse 62% 52% at 50% 40%, rgba(201,164,92,.10), transparent 70%), radial-gradient(ellipse at 22% 34%,#143a32 0%,var(--green) 46%,var(--black) 100%); overflow:hidden; isolation:isolate; } .hero[data-code]::after{ content:attr(data-code); position:absolute; right:var(--gut); top:96px; z-index:6; font-size:.56rem; font-weight:600; letter-spacing:.32em; color:var(--gold); opacity:.5; } .orb{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; } .orb--a{ width:44vw; height:44vw; left:-10vw; top:-8vw; background:rgba(var(--accent-rgb),.13); animation:float 15s ease-in-out infinite alternate; } .orb--b{ width:38vw; height:38vw; right:-8vw; bottom:-10vw; background:rgba(13,27,61,.55); animation:float 19s ease-in-out infinite alternate-reverse; } @keyframes float{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(4vw,3vw,0); } } /* -------------------------------------------------------------------------- THE HERO STAGE — three planes, back to front The name is set once, very large, and lies flat at the back. The portrait stands in front of it and hides the middle of it, which is what makes the two read as separate depths rather than as one flat picture. The signature sits closest of all. Each plane keeps its own layout transform and takes the pointer as two custom properties, so the script never has to know how a plane is centred - it writes --px and --py and the plane composes them. A plane left alone reads 0 and sits exactly where the CSS put it. -------------------------------------------------------------------------- */ .hero__stage{ position:absolute; inset:0; z-index:1; pointer-events:none; transform:translate3d(0,var(--sy,0px),0); } /* The order of the two planes is the whole point: the name is the backdrop and the figure stands in front of it. The figure is the thing the pointer moves; the name behind it is close to still, so what you see is him travelling across a fixed ground rather than the pair sliding together. */ .hero__giant{ position:absolute; left:50%; top:30%; z-index:1; margin:0; transform:translate3d(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px)), 0); font-family:var(--fd); font-weight:800; line-height:.82; /* three words, one on top of the other, so the whole name reads at the size a single word used to - each line is its own block and the texture below is clipped across all three as one surface */ font-size:clamp(1.5rem,8.4vw,7.4rem); letter-spacing:-.03em; white-space:nowrap; text-align:center; /* stone rather than paint: a fine noise laid over the fall of light, both clipped to the letterforms so the name reads as a surface, not a fill */ --g1:rgba(245,241,232,.46); --g2:rgba(245,241,232,.26); --g3:rgba(201,164,92,.34); --g4:rgba(245,241,232,.17); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(168deg, var(--g1) 0%, var(--g2) 46%, var(--g3) 78%, var(--g4) 100%); background-blend-mode:overlay; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; user-select:none; } .hero__giant span{ display:block; } .hero__cut{ position:absolute; left:57%; bottom:0; z-index:2; margin:0; /* he is seated, so his silhouette is nearly square rather than tall: the slot is widened to match and he is set right of centre, which keeps him large enough to read and leaves the copy its own corner */ width:clamp(340px,50vw,720px); height:min(64vh,700px); transform:translate3d(calc(-50% + var(--px,0px)), var(--py,0px), 0) scale(var(--pz,1)); transition:scale .6s var(--e); } /* The picture is a cut-out with a real alpha channel, so there is no sky to hide and nothing to mask: the figure stands on the page and the name shows through every gap in him, which is the whole point of the layout. The shadow is cast off his own outline, not off a box. */ .hero__cut img{ width:100%; height:100%; object-fit:contain; object-position:50% 100%; filter:drop-shadow(0 26px 42px rgba(0,0,0,.5)); } /* --- the reading column, which sits over every plane --- */ .hero__in{ position:relative; z-index:4; width:100%; display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap; } .hero__lead{ max-width:min(44ch,100%); } .hero__kicker{ margin:14px 0 0; font-size:.66rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--ink); } .hero__lede{ margin:16px 0 0; font-size:clamp(.92rem,1.5vw,1.06rem); line-height:1.75; color:var(--soft); } .hero__rule{ display:block; width:64px; height:3px; margin-top:24px; border-radius:2px; background:var(--gold); } .hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } .cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:.54rem; font-weight:600; letter-spacing:.26em; color:var(--mute); /* the figure now stands where this sits, so it is haloed in whatever the ground happens to be and stays legible over him in either theme */ text-shadow:0 1px 9px var(--black), 0 0 3px var(--black); } .cue span{ width:1px; height:44px; background:var(--hairw); position:relative; overflow:hidden; } .cue span::after{ content:''; position:absolute; inset:0; background:var(--gold); animation:cue 2s var(--e) infinite; } @keyframes cue{ from{ transform:translateY(-100%); } to{ transform:translateY(100%); } } /* --- narrower screens: the name steps back, the column takes the room --- */ @media (max-width:900px){ /* Syne at 800 runs about one em to the character, so the longest of the three lines is the measure: sized off the viewport it has to fit, not off the one word the name used to be. */ .hero__giant{ top:34%; font-size:clamp(2rem,10.8vw,6rem); } .hero__cut{ width:min(74vw,420px); height:min(64vh,620px); opacity:.85; } .hero__in{ align-items:flex-start; } .hero__lead{ max-width:none; } } @media (max-width:640px){ /* On a phone the stage becomes a backdrop: the figure holds the upper half at low strength and the reading column takes the lower half outright, so nothing is set over a face. */ .hero{ align-items:flex-end; padding-bottom:92px; } /* there is no room above his head on a phone, so the name crosses his lap instead - which is where it sits behind him on a laptop anyway */ .hero__giant{ top:44%; font-size:clamp(1.5rem,11.4vw,4.4rem); } /* a seated figure is wide, so he takes more than the full measure here rather than being shrunk to fit inside it */ .hero__cut{ width:min(112vw,520px); height:48vh; bottom:auto; top:4vh; opacity:.92; } .hero__cut img{ object-position:50% 0; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 99%); mask-image:linear-gradient(180deg,#000 70%,transparent 99%); } .hero__lead{ position:relative; } .hero__lede br{ display:none; } .hero__lede{ font-size:.94rem; line-height:1.7; } .hero__kicker{ font-size:.58rem; letter-spacing:.24em; } } /* ========================================================================== 06. COVERFLOW — the 25 frames rotating through 3D space ========================================================================== */ .cf{ position:relative; perspective:1500px; perspective-origin:50% 44%; margin-block:clamp(20px,4vw,44px); } .cf__stage{ position:relative; height:clamp(330px,48vw,560px); transform-style:preserve-3d; cursor:grab; touch-action:pan-y; outline:none; } .cf__stage:active{ cursor:grabbing; } .cf__i{ position:absolute; top:50%; left:50%; /* the frame is held to a common height and takes its width from the picture, so a stage frame hangs wide and a portrait hangs tall */ height:clamp(290px,38vw,480px); width:auto; aspect-ratio:var(--ar,3/4); margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--hair); background:var(--card); transform-style:preserve-3d; transition:transform .7s var(--eo), opacity .7s var(--e), box-shadow .7s var(--e); will-change:transform; } .cf__i img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; } .cf__i::after{ content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,transparent 40%,rgba(5,15,12,.7)); opacity:.9; transition:opacity .6s var(--e); } .cf__i.mid{ border-color:var(--gold); box-shadow:0 40px 70px -20px rgba(0,0,0,.95), 0 0 60px rgba(var(--accent-rgb),.25); } .cf__i.mid::after{ opacity:.25; } .cf__i.mid .cf__num{ opacity:1; } /* unused: frames carry no number */ .cf__num{ position:absolute; left:12px; bottom:10px; z-index:3; opacity:0; font-family:var(--fd); font-weight:800; font-size:.9rem; letter-spacing:.14em; color:var(--gold); transition:opacity .5s var(--e); } /* the reflective floor the frames sit on */ .cf__floor{ position:absolute; left:50%; bottom:2%; transform:translateX(-50%); width:min(80%,900px); height:70px; border-radius:50%; background:radial-gradient(ellipse,rgba(var(--accent-rgb),.15),transparent 70%); filter:blur(20px); pointer-events:none; } .cf__bar{ display:flex; align-items:center; gap:20px; justify-content:center; margin-top:12px; } .cf__meta{ text-align:center; min-width:0; flex:1; max-width:440px; } .cf__n{ display:block; font-family:var(--fd); font-weight:800; font-size:1.1rem; letter-spacing:.1em; color:var(--mute); } .cf__n b{ color:var(--gold); font-weight:800; } .cf__cap{ display:block; margin-top:2px; font-size:.84rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cf__cat{ display:block; margin-top:2px; font-size:.54rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); } .cf__track{ height:2px; background:var(--hairw); border-radius:2px; margin-top:16px; max-width:600px; margin-inline:auto; } .cf__track i{ display:block; height:100%; width:4%; border-radius:2px; background:var(--gold-metal); transition:width .5s var(--e); } /* ========================================================================== 07. CARDS · SLABS · PLAYERS ========================================================================== */ .slab{ position:relative; padding:clamp(24px,3vw,34px); border-radius:var(--r); background:linear-gradient(158deg,var(--card-hi),var(--card)); border:1px solid var(--hair); transform-style:preserve-3d; box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 3px 0 #071612, 0 6px 0 #051310, 0 28px 44px -16px rgba(0,0,0,.9); transition:transform .5s var(--eo), box-shadow .5s var(--e); } .slab--num{ text-align:center; padding:26px 18px; } .slab--num b{ display:block; font-family:var(--fd); font-weight:800; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--gold); } .slab--num b::after{ content:'+'; font-size:.45em; vertical-align:super; color:var(--mute); } .slab--num span{ display:block; margin-top:8px; font-size:.56rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); } .slab__no{ position:absolute; top:-16px; right:20px; transform:translateZ(30px); font-family:var(--fd); font-weight:800; font-size:1.5rem; color:var(--metal-ink); background:var(--gold-metal); padding:3px 12px; border-radius:9px; box-shadow:0 3px 0 var(--metal-rim); } .slab h3{ font-family:var(--fd); font-weight:800; font-size:1.4rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px; } .kv > div{ display:grid; grid-template-columns:minmax(0,140px) 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--hairw); align-items:baseline; } .kv > div:last-child{ border-bottom:0; } .kv dt{ font-size:.57rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); } .kv dd{ font-size:.93rem; color:var(--ink); } .kv--dark > div{ border-bottom-color:rgba(11,31,26,.12); } .kv--dark dt{ color:rgba(11,31,26,.5); } .kv--dark dd{ color:var(--green); } /* --- photo card with real depth --- */ .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; } .cards--3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:34px; } /* the nine rasas are read as a nine-square: three across, three down */ .cards--9{ grid-template-columns:repeat(3,minmax(0,1fr)); } .pc{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--hair); background:var(--card); transform-style:preserve-3d; box-shadow:0 3px 0 #071612, 0 22px 34px -14px rgba(0,0,0,.9); transition:transform .5s var(--eo), box-shadow .5s var(--e); } /* height:auto hands the box back to the ratio — the width/height on the tag are presentational hints and would otherwise pin it to the pixel height */ .pc img{ position:relative; z-index:1; width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; object-position:center; transition:filter .5s var(--e); filter:saturate(.85) contrast(1.05); } .pc:hover img{ filter:none; } .pc--tall img{ aspect-ratio:4/5; } /* --- a card that turns over its own photographs, unattended --- */ .pc__stack{ position:relative; display:block; aspect-ratio:3/4; } .pc__stack img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; aspect-ratio:auto; object-fit:contain; object-position:center; opacity:0; transition:opacity 1s var(--e), filter .5s var(--e); } .pc__stack img.on{ opacity:1; } @media (prefers-reduced-motion:reduce){ .pc__stack img{ transition:none; } } /* --- one block per role: title, then its three frames --- */ .roles{ margin-top:58px; display:grid; gap:52px; } .role__h{ display:flex; align-items:baseline; gap:14px; padding-bottom:12px; border-bottom:1px solid var(--hair); } .role__h b{ font-size:.55rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); } .role__t{ font-family:var(--fd); font-weight:800; font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:.04em; margin:0; } .role .cards--3{ margin-top:20px; } .pc figcaption{ position:absolute; inset:auto 0 0 0; z-index:2; display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:34px 14px 13px; background:linear-gradient(transparent,rgba(5,15,12,.94)); transform:translateZ(26px); } .pc figcaption b{ font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; } .pc figcaption i{ font-style:normal; font-family:var(--fd); font-weight:800; font-size:.95rem; color:var(--gold); } /* -------------------------------------------------------------------------- TRUE-SHAPE FRAMES — every card is cut to its own photograph A standing portrait gets a standing card; a stage frame shot wide gets a wide one. Each row is then justified to the full measure: the heights inside a row agree, the widths do not. So the wall reads as a hung set of prints, not a grid of identical boxes, and no picture is padded or cut. The widths are written by justifyFrames() in script.js; without it the cards fall back to the plain grid above. -------------------------------------------------------------------------- */ /* a row that cannot fill the measure sits centred, so the space it leaves over falls evenly on both sides and reads as a margin, not a gap */ /* doubled class so this wins over any wall rule further down the sheet, whatever order the sections were written in */ /* doubled class so this wins over any wall rule further down the sheet, whatever order the sections happen to be written in */ .fitrow.fitrow{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:var(--fitgap,16px); } .fitrow.fitrow > .pc{ flex:0 0 auto; aspect-ratio:var(--ar,3/4); } .fitrow.fitrow > .pc > img, .fitrow.fitrow > .pc > .pc__stack{ width:100%; height:100%; aspect-ratio:auto; } /* --- the frame's own craft: a mat rule, and crop marks that strike in --- */ .pc::before{ content:''; position:absolute; inset:8px; z-index:3; pointer-events:none; border:1px solid rgba(var(--accent-rgb),.14); border-radius:9px; transition:inset .5s var(--eo), border-color .45s var(--e); } .pc:hover::before{ inset:12px; border-color:rgba(var(--accent-rgb),.42); } /* register marks at the two top corners — a contact-sheet tell, held back until the pointer arrives so the resting wall stays quiet */ .pc::after{ content:''; position:absolute; inset:14px; z-index:3; pointer-events:none; opacity:0; transition:opacity .4s var(--e); background: linear-gradient(var(--gold),var(--gold)) left top/15px 1px no-repeat, linear-gradient(var(--gold),var(--gold)) left top/1px 15px no-repeat, linear-gradient(var(--gold),var(--gold)) right top/15px 1px no-repeat, linear-gradient(var(--gold),var(--gold)) right top/1px 15px no-repeat; } .pc:hover::after{ opacity:.8; } .pc:hover figcaption i{ text-shadow:0 0 14px rgba(var(--accent-rgb),.65); } /* -------------------------------------------------------------------------- NAVARASA — THREE RASA CARDS TO A ROW, FOUR FRAMES INSIDE EACH Nine rasas read as three rows of three cards. A card carries its own name and, inside it, four small sub-frames in a two-by-two — one photograph each, kept small so the section stays short. The sub-frame under the pointer (or under keyboard focus) pops out of the card, large enough to read, while its three neighbours step back. A pop grows inward from the sub-frame's own side, so it never leaves the page measure. On a touch screen there is no pointer, so the cards simply stay cards. -------------------------------------------------------------------------- */ .rasas{ margin-top:46px; display:grid; align-items:start; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,26px); } .rcard{ position:relative; padding:clamp(12px,1.5vw,18px); border-radius:var(--r); background:linear-gradient(158deg,var(--card-hi),var(--card)); border:1px solid var(--hair); box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 3px 0 #071612, 0 6px 0 #051310, 0 22px 34px -16px rgba(0,0,0,.9); } .rcard__h{ display:flex; align-items:baseline; gap:9px; padding-bottom:9px; margin-bottom:11px; border-bottom:1px solid var(--hairw); } .rcard__h b{ font-family:var(--fd); font-weight:800; font-size:.6rem; letter-spacing:.18em; color:var(--gold); } .rcard__t{ margin:0; font-family:var(--fd); font-weight:800; font-size:clamp(.86rem,1.5vw,1.1rem); letter-spacing:.04em; text-transform:uppercase; } .rcard__e{ margin-left:auto; font-size:.5rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); } /* The four sub-frames, two by two inside the one card. The container is deliberately NOT called .rgrid: justifyFrames() in script.js re-flows the children of .cards and .rgrid into justified rows of uneven widths, which would break the two-by-two and make the nine cards ragged. */ .rquad{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .rpc{ z-index:1; border-radius:10px; background:var(--sunk); cursor:zoom-in; outline:none; box-shadow:0 2px 0 #071612, 0 10px 16px -10px rgba(0,0,0,.85); transition:transform .5s var(--eo), box-shadow .5s var(--e), opacity .45s var(--e), filter .45s var(--e); } /* the width/height attributes on the tag are presentational hints; height:auto hands the box back to the ratio so a frame is a frame with or without JS */ .rpc img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; } /* a pop opens away from the sub-frame's own edge, so it stays on the page */ .rquad > .rpc:nth-child(odd) { transform-origin:left center; } .rquad > .rpc:nth-child(even){ transform-origin:right center; } /* the rest of the card steps back while one frame is up */ .rquad:hover > .rpc:not(:hover), .rquad:focus-within > .rpc:not(:hover):not(:focus-visible){ opacity:.38; filter:saturate(.5) brightness(.7); } .rpc:hover, .rpc:focus-visible{ z-index:40; opacity:1; filter:none; transform:scale(2.05); border-color:rgba(var(--accent-rgb),.55); box-shadow:0 3px 0 #071612, 0 40px 66px -16px rgba(0,0,0,.96), 0 0 0 1px rgba(var(--accent-rgb),.22); } /* the name sits out of the way until its frame is the one being read, and the camera angle the frame was shot from reads on the line under it */ .rpc figcaption{ opacity:0; padding:22px 8px 7px; transition:opacity .4s var(--e); flex-direction:column; align-items:flex-start; gap:1px; background:linear-gradient(transparent,rgba(5,15,12,.55) 38%,rgba(5,15,12,.96)); } .rpc figcaption b{ font-size:.5rem; letter-spacing:.14em; } .rpc figcaption i{ font-family:var(--fb); font-weight:600; font-size:.4rem; letter-spacing:.09em; text-transform:uppercase; line-height:1.4; } .rpc:hover figcaption, .rpc:focus-visible figcaption{ opacity:1; } @media (max-width:1024px){ .rasas{ grid-template-columns:repeat(2,minmax(0,1fr)); } .rpc:hover,.rpc:focus-visible{ transform:scale(1.9); } } @media (max-width:640px){ .rasas{ grid-template-columns:1fr; gap:16px; } .rcard__e{ margin-left:auto; } .rpc:hover,.rpc:focus-visible{ transform:scale(1.7); } } @media (pointer:coarse){ .rpc{ cursor:default; } .rpc:hover{ transform:none; box-shadow:0 2px 0 #071612, 0 10px 16px -10px rgba(0,0,0,.85); } .rquad:hover > .rpc:not(:hover){ opacity:1; filter:none; } .rpc figcaption{ opacity:1; } } @media (prefers-reduced-motion:reduce){ .pc::before,.pc::after{ transition:none; } } /* --- video player as a raised 3D screen --- */ .player{ position:relative; transform-style:preserve-3d; cursor:pointer; } .player__glow{ position:absolute; inset:10% 8%; z-index:0; border-radius:50%; background:rgba(var(--accent-rgb),.22); filter:blur(60px); } .player__in{ position:relative; aspect-ratio:var(--ar,16/9); border-radius:18px; overflow:hidden; border:1px solid var(--hair); background:var(--sunk); box-shadow:0 3px 0 #071612, 0 8px 0 #04100d, 0 40px 60px -20px rgba(0,0,0,.95); } .player--wide .player__in{ aspect-ratio:var(--ar,21/9); } /* Behind the Frame: the poster is a standing photograph, so trueShape() was giving that frame the picture's own tall shape at the full measure — a screen nearly 1700px high for a clip that is 848x480. The frame is capped and centred here, and cut to the shape of the film it plays; the poster is contained inside it, so nothing is cropped. */ .player--short{ max-width:min(100%,720px); margin-inline:auto; } .player--short .player__in{ aspect-ratio:16/9; } .player--short .pbtn:not(.pbtn--sm){ width:74px; height:74px; } .player--short .pbtn:not(.pbtn--sm) .ico{ width:21px; height:21px; } .player__in img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; filter:brightness(.7) saturate(.85); transition:filter .6s var(--e); } .player:hover .player__in img{ filter:brightness(.88); } .pbtn{ position:absolute; inset:0; margin:auto; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; z-index:2; background:var(--gold-metal); color:var(--metal-ink); box-shadow:0 6px 0 var(--metal-rim), 0 20px 34px -10px rgba(0,0,0,.85); transition:transform .35s var(--spring); } .pbtn .ico{ width:26px; height:26px; margin-left:4px; } .pbtn--sm{ width:66px; height:66px; } .pbtn--sm .ico{ width:19px; height:19px; } .player:hover .pbtn{ transform:scale(1.1) translateZ(30px); } .pbtn span{ position:absolute; inset:-13px; border-radius:50%; border:1px solid rgba(var(--accent-rgb),.55); animation:ring 2.6s var(--e) infinite; } @keyframes ring{ 0%{ transform:scale(.9); opacity:1; } 100%{ transform:scale(1.32); opacity:0; } } .player__bar{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:34px 18px 15px; background:linear-gradient(transparent,rgba(5,15,12,.92)); font-size:.56rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; } .player__bar i{ font-style:normal; color:var(--gold); } .reels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-bottom:36px; } .yrs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; margin-bottom:32px; } /* --- theatre bill --- */ .bill{ position:relative; max-width:820px; margin-inline:auto; text-align:center; padding:clamp(30px,5vw,56px) clamp(22px,4vw,50px); border-radius:22px; background:linear-gradient(158deg,#3a1113,#170606); border:1px solid rgba(183,28,28,.6); transform-style:preserve-3d; box-shadow:0 4px 0 #0d0303, 0 10px 0 #080202, 0 44px 70px -22px rgba(0,0,0,.95); } .bill__glow{ position:absolute; inset:14% 10%; z-index:-1; border-radius:50%; background:rgba(183,28,28,.4); filter:blur(70px); } .bill__pre{ font-size:.55rem; font-weight:600; letter-spacing:.34em; color:var(--gold); } .bill__t{ font-size:clamp(1.9rem,6vw,4rem); margin:18px 0 14px; } .bill__d{ font-size:.6rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--soft); } .bill__d b{ color:var(--ink); font-weight:600; } .bill__g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; margin:32px 0; padding:24px 0; border-block:1px solid rgba(var(--accent-rgb),.28); } .bill__g span{ display:block; font-size:.52rem; font-weight:600; letter-spacing:.24em; color:var(--mute); margin-bottom:6px; } .bill__g b{ font-size:.9rem; font-weight:400; line-height:1.6; } .bill__rl{ font-size:.52rem; font-weight:600; letter-spacing:.28em; color:var(--mute); margin-bottom:14px; } .bill__r{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; } .bill__r .chip3d{ flex-direction:row; align-items:baseline; gap:9px; } /* --- screen credit --- */ .cred{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(26px,4vw,50px); align-items:center; } .cred__art{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--hair); transform-style:preserve-3d; box-shadow:0 4px 0 #050b18, 0 34px 56px -20px rgba(0,0,0,.95); } .cred__art img{ position:relative; z-index:1; width:100%; height:auto; aspect-ratio:var(--ar,3/4); object-fit:contain; object-position:center; } .cred__badge{ position:absolute; top:14px; left:14px; z-index:2; transform:translateZ(24px); background:var(--gold-metal); color:var(--metal-ink); border-radius:8px; font-size:.52rem; font-weight:700; letter-spacing:.22em; padding:6px 12px; box-shadow:0 3px 0 var(--metal-rim); } .cred__body{ background:linear-gradient(158deg,#1a2f60,#0a142e); border-color:rgba(42,74,158,.6); box-shadow:0 3px 0 #050b18, 0 6px 0 #040917, 0 30px 48px -18px rgba(0,0,0,.9); } .cred__t{ font-size:clamp(1.5rem,3.4vw,2.5rem); } .cred__t span{ color:var(--gold); } .cred__sub{ font-size:.56rem; font-weight:600; letter-spacing:.28em; color:var(--soft); margin-top:10px; } .cred__role{ display:flex; align-items:baseline; gap:14px; margin:20px 0 8px; padding-bottom:16px; border-bottom:1px solid var(--hair); } .cred__role span{ font-size:.54rem; font-weight:600; letter-spacing:.24em; color:var(--mute); } .cred__role b{ font-family:var(--fd); font-weight:800; font-size:1.3rem; color:var(--gold); } .cred .btn{ margin-top:22px; } .aud{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr); gap:clamp(24px,3.4vw,40px); align-items:start; } .aud__n{ font-family:var(--fd); font-weight:800; font-size:1.1rem; letter-spacing:.12em; text-transform:uppercase; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--hair); } .aud__b{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } /* --- media cards --- Five cards, every one the same size. The grid runs on six columns and each card spans two, so three sit in the first row; the remaining two are placed at columns 2 and 4, which centres them under the row above at exactly the same width instead of stretching to half the measure each. grid-auto-rows keeps the two rows level, and the poster frame below is cut to one shape for all five rather than to each poster's own. */ .mgrid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:1fr; gap:20px; align-items:stretch; } .mgrid > .mc{ grid-column:span 2; } .mgrid > .mc:nth-child(4){ grid-column:2 / span 2; } .mgrid > .mc:nth-child(5){ grid-column:4 / span 2; } /* two across, then the odd one centred; and one across on a phone */ @media (max-width:900px){ .mgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } .mgrid > .mc:nth-child(4){ grid-column:span 2; } .mgrid > .mc:nth-child(5){ grid-column:2 / span 2; } } @media (max-width:640px){ .mgrid{ grid-template-columns:1fr; } .mgrid > .mc, .mgrid > .mc:nth-child(4), .mgrid > .mc:nth-child(5){ grid-column:1 / -1; } } .mc{ border-radius:18px; overflow:hidden; cursor:pointer; transform-style:preserve-3d; background:linear-gradient(158deg,var(--card-hi),var(--card)); border:1px solid var(--hair); box-shadow:0 3px 0 #071612, 0 22px 36px -14px rgba(0,0,0,.9); transition:transform .5s var(--eo), box-shadow .5s var(--e); } /* one poster shape for all five cards — trueShape() would otherwise cut each frame to its own poster and leave the row ragged. The picture is contained, so nothing is cropped by the shared shape. */ .mc__img{ position:relative; aspect-ratio:16/9; overflow:hidden; } .mc__img img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; filter:brightness(.72) saturate(.85); transition:filter .5s var(--e); } .mc:hover .mc__img img{ filter:brightness(.95); } .mc__p{ position:absolute; inset:0; z-index:3; margin:auto; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--gold-metal); color:var(--metal-ink); box-shadow:0 4px 0 var(--metal-rim); transition:transform .35s var(--spring); } .mc__p .ico{ width:17px; height:17px; margin-left:3px; } .mc:hover .mc__p{ transform:scale(1.12) translateZ(26px); } .mc__f{ position:absolute; top:10px; right:10px; z-index:3; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; color:var(--white); background:rgba(5,15,12,.6); border:1px solid var(--hairw); transition:all .3s var(--e); } .mc__f:hover{ border-color:var(--gold); color:var(--gold); } .mc__b{ position:relative; padding:18px; } .mc__n{ position:absolute; top:-16px; right:16px; transform:translateZ(24px); font-family:var(--fd); font-weight:800; font-size:1.3rem; color:var(--metal-ink); background:var(--gold-metal); padding:2px 10px; border-radius:8px; box-shadow:0 3px 0 var(--metal-rim); } .mc__b h3{ font-size:.96rem; font-weight:500; } .mc__b p{ display:flex; gap:16px; margin-top:6px; } .mc__b i{ font-style:normal; font-size:.54rem; font-weight:600; letter-spacing:.2em; color:var(--mute); } /* ========================================================================== 08. GALLERY · FLIP CARDS · CONTACT ========================================================================== */ /* -------------------------------------------------------------------------- GALLERY WALL A twelve-column grid on a 22px row, so a frame can be a quarter of the measure, a half, or a tall standing print, and the dense flow packs them without leaving holes. The spans below are cut close to the shapes the photographs actually are — a standing portrait at 3:4, a stage frame wide — so the blurred fill behind each picture is a margin, not half the frame. -------------------------------------------------------------------------- */ .gg{ display:grid; grid-template-columns:repeat(10,1fr); grid-auto-rows:22px; grid-auto-flow:row dense; gap:16px; } .gi{ position:relative; grid-column:span 2; grid-row:span 11; border-radius:16px; overflow:hidden; cursor:pointer; border:1px solid var(--hairw); background:var(--card); transform-style:preserve-3d; box-shadow:0 3px 0 #071612, 0 20px 34px -14px rgba(0,0,0,.9); animation:pop .5s var(--eo) both; transition:box-shadow .5s var(--e), border-color .4s var(--e); } .gi--t { grid-row:span 15; } .gi--w { grid-column:span 5; grid-row:span 10; } .gi--xl{ grid-column:span 5; grid-row:span 22; } .gi.hide{ display:none; } @keyframes pop{ from{ opacity:0; transform:translateY(16px) scale(.97); } } .gi img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center; filter:saturate(.92) contrast(1.06) brightness(.94); transition:filter .55s var(--e); } .gi:hover{ border-color:var(--gold); box-shadow:0 3px 0 #071612, 0 26px 44px -14px rgba(0,0,0,.95), 0 0 0 1px rgba(var(--accent-rgb),.3) inset; } .gi:hover img{ filter:saturate(1.08) contrast(1.02) brightness(1.06); } /* the frame's number rests in the corner and the caption arrives with the pointer, so a quiet wall still tells you what you are looking at */ .gi::after{ content:attr(data-cat); position:absolute; left:12px; bottom:11px; z-index:4; font-size:.53rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); opacity:.34; transform:translateZ(24px); transition:opacity .4s var(--e); } .gi::before{ content:''; position:absolute; inset:0; z-index:3; background:linear-gradient(transparent 45%,rgba(5,15,12,.85)); opacity:.34; transition:opacity .4s var(--e); } .gi:hover::after{ opacity:1; } .gi:hover::before{ opacity:1; } /* --- the slogans between the frames --- Not cards: no border, no plate, no box. Each one sits on a soft cloud of light — an off-round radial wash, blurred, that reads as glow rather than as an edge — with the line set in the display face so it carries like a line of copy on a poster instead of a caption. */ .gnote{ position:relative; grid-column:span 2; grid-row:span 7; display:flex; flex-direction:column; justify-content:center; gap:11px; padding:20px 22px; background:none; border:0; box-shadow:none; text-align:center; animation:pop .5s var(--eo) both; } .gnote--tall{ grid-row:span 10; } .gnote::before{ content:''; position:absolute; inset:-4% -6%; z-index:0; pointer-events:none; border-radius:52% 48% 44% 56% / 46% 54% 46% 54%; background:radial-gradient(58% 56% at 50% 42%, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.07) 55%, transparent 74%); filter:blur(12px); } .gnote > *{ position:relative; z-index:1; } .gnote b{ font-size:.5rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); } .gnote p{ margin:0; font-family:var(--fd); font-weight:800; font-size:clamp(.98rem,1.5vw,1.24rem); line-height:1.32; letter-spacing:.01em; color:var(--white); text-wrap:balance; } .gnote.hide{ display:none; } /* --- flip cards: front = label, back = value --- */ .flips{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:40px; } .flip{ perspective:900px; height:120px; cursor:pointer; outline:none; } .flip__in{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .7s var(--eo); } .flip:hover .flip__in,.flip:focus-visible .flip__in,.flip.on .flip__in{ transform:rotateY(180deg); } .flip__f,.flip__b{ position:absolute; inset:0; border-radius:16px; display:grid; place-items:center; text-align:center; padding:16px; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .flip__f{ background:linear-gradient(158deg,#f6f4ee,#e6e2d6); border:1px solid rgba(11,31,26,.14); box-shadow:0 3px 0 #cfcabb, 0 14px 26px -12px rgba(11,31,26,.35); } .flip__f span{ font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(11,31,26,.62); } .flip__b{ transform:rotateY(180deg); background:linear-gradient(158deg,var(--card-hi),var(--green)); border:1px solid var(--gold); box-shadow:0 3px 0 #071612, 0 16px 28px -12px rgba(0,0,0,.7); } .flip__b b{ font-family:var(--fd); font-weight:800; font-size:1rem; line-height:1.35; color:var(--white); } .flip__b b i{ display:block; font-style:normal; font-family:var(--fb); font-weight:400; font-size:.72rem; color:var(--gold); margin-top:4px; } .wboxes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; } .wbox{ padding:26px 24px; border-radius:var(--r); background:#fbfaf7; border:1px solid rgba(11,31,26,.12); transform-style:preserve-3d; box-shadow:0 3px 0 #dedad0, 0 20px 34px -16px rgba(11,31,26,.3); transition:transform .5s var(--eo), box-shadow .5s var(--e); } .wbox h3{ font-size:.6rem; font-weight:700; letter-spacing:.26em; color:var(--gold-dk); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(11,31,26,.12); } .wbox .range{ margin-bottom:0; } .ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:42px; } .regions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; } .regions .chip3d{ align-items:center; text-align:center; padding:22px 16px; } .regions b{ font-family:var(--fb); font-size:.68rem; font-weight:600; letter-spacing:.2em; color:var(--white); } .regions i{ margin-top:6px; } /* REGION EMBLEM — one slot, two kinds of mark. A flag fills the slot and is given an edge, the way a flag hung on a wall has one. A globe stands inside the same slot in the chip's own gold, so the row reads as a set even where no flag exists. */ .rem{ display:block; width:34px; height:23px; margin-bottom:13px; border-radius:4px; overflow:hidden; transform:translateZ(20px); border:1px solid rgba(255,255,255,.34); box-shadow:0 2px 6px -1px rgba(0,0,0,.7); } .rem svg{ display:block; width:100%; height:100%; } /* .chip3d span already claims a muted colour, so the globe has to out-rank it to take the accent the rest of the chip is lit with */ .regions .chip3d .rem--globe{ border:0; border-radius:0; box-shadow:none; color:var(--gold); } .chip3d:hover .rem{ box-shadow:0 4px 9px -2px rgba(0,0,0,.75); } /* --- contact --- */ .ct{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:start; } .card3d{ position:relative; padding:clamp(26px,3.4vw,36px); border-radius:22px; text-align:center; transform-style:preserve-3d; background:linear-gradient(158deg,var(--card-hi),var(--green)); border:1px solid var(--gold); box-shadow:0 4px 0 #071612, 0 10px 0 #04100d, 0 44px 66px -22px rgba(0,0,0,.95); } .card3d__glow{ position:absolute; inset:12% 8%; z-index:-1; border-radius:50%; background:rgba(var(--accent-rgb),.3); filter:blur(64px); } .card3d__cube{ display:grid; place-items:center; width:62px; height:62px; margin:0 auto 16px; border-radius:14px; transform:translateZ(34px); background:linear-gradient(158deg,#1c4a3e,#0e2a23); border:1px solid var(--hair); box-shadow:0 4px 0 #061310, 0 12px 22px -8px rgba(0,0,0,.8); } .card3d__cube svg{ width:64%; height:64%; } .card3d__n{ font-family:var(--fd); font-weight:800; font-size:1.25rem; line-height:1.3; letter-spacing:.1em; transform:translateZ(20px); } .card3d__r{ font-size:.54rem; font-weight:600; letter-spacing:.24em; color:var(--gold); margin-top:10px; } .card3d__c{ font-size:.54rem; letter-spacing:.22em; color:var(--mute); margin-top:5px; } .card3d__l{ display:grid; gap:12px; margin:24px 0; padding:20px 0; text-align:left; border-block:1px solid var(--hairw); transform:translateZ(14px); } .card3d__l li{ display:flex; align-items:center; gap:12px; font-size:.87rem; color:var(--soft); } .card3d__l .ico{ color:var(--gold); } .card3d__l a:hover{ color:var(--gold); } .card3d__sl{ font-size:.52rem; font-weight:600; letter-spacing:.28em; color:var(--mute); margin:24px 0 12px; } .socs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .socs a{ display:block; padding:9px 14px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid var(--hairw); font-size:.55rem; font-weight:600; letter-spacing:.14em; color:var(--soft); box-shadow:0 2px 0 rgba(0,0,0,.4); transition:all .3s var(--e); } .socs a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); } .form{ display:grid; gap:16px; } .f{ display:grid; gap:7px; } .f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .f label{ font-size:.55rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); } .f label i{ color:#ff6b6b; font-style:normal; } .f input,.f select,.f textarea{ width:100%; padding:14px 15px; min-height:48px; border-radius:11px; background:var(--sunk); border:1px solid var(--hairw); color:var(--ink); font-size:.92rem; font-weight:300; box-shadow:0 2px 6px rgba(0,0,0,.4) inset; transition:border-color .3s var(--e), background .3s var(--e); } .f textarea{ resize:vertical; min-height:120px; } .f select{ appearance:none; cursor:pointer; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:15px; } .f select option{ background:var(--card); } .f input::placeholder,.f textarea::placeholder{ color:var(--mute); } .f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--gold); } .f input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.75); cursor:pointer; } .f .e{ font-size:.7rem; color:#ff6b6b; min-height:1em; opacity:0; transform:translateY(-3px); transition:opacity .25s var(--e), transform .25s var(--e); } .f.bad input,.f.bad select,.f.bad textarea{ border-color:#ff6b6b; } .f.bad .e{ opacity:1; transform:none; } .fnote{ text-align:center; font-size:.84rem; min-height:1.4em; color:var(--soft); } .fnote.ok{ color:var(--gold); } .fnote.no{ color:#ff6b6b; } .foot{ background:linear-gradient(180deg,var(--black),#020806); border-top:1px solid var(--hair); padding:clamp(48px,7vw,80px) 0 32px; } .foot__s{ text-align:center; font-size:clamp(1.7rem,6vw,4.2rem); color:rgba(255,255,255,.1); text-shadow:1px 1px 0 rgba(var(--accent-rgb),.16), 2px 2px 0 rgba(var(--accent-rgb),.11), 3px 3px 0 rgba(var(--accent-rgb),.07), 4px 4px 10px rgba(0,0,0,.5); } /* -------------------------------------------------------------------------- THE SIGN-OFF — namaste, extruded Not a picture of a 3D object: ten copies of the same outline stacked along the Z axis inside a preserve-3d parent, the hindmost faint and the frontmost in the accent, turning together so the depth between them is real. Line art seen edge-on disappears, so it rocks through a narrow arc rather than spinning - and stops altogether for anyone who has asked the system for less movement. -------------------------------------------------------------------------- */ .thx{ display:grid; place-items:center; text-align:center; gap:18px; margin-top:clamp(36px,5vw,60px); } .thx__stage{ perspective:760px; width:116px; height:128px; } .thx__3d{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:thxturn 9s ease-in-out infinite alternate; } @keyframes thxturn{ from{ transform:rotateX(8deg) rotateY(-26deg); } to { transform:rotateX(8deg) rotateY(26deg); } } .thx__l{ position:absolute; inset:0; width:100%; height:100%; color:var(--gold); opacity:.2; } .thx__l:nth-child(1){ transform:translateZ(0px); opacity:.10; } .thx__l:nth-child(2){ transform:translateZ(1.6px); opacity:.14; } .thx__l:nth-child(3){ transform:translateZ(3.2px); opacity:.18; } .thx__l:nth-child(4){ transform:translateZ(4.8px); opacity:.22; } .thx__l:nth-child(5){ transform:translateZ(6.4px); opacity:.27; } .thx__l:nth-child(6){ transform:translateZ(8px); opacity:.33; } .thx__l:nth-child(7){ transform:translateZ(9.6px); opacity:.40; } .thx__l:nth-child(8){ transform:translateZ(11.2px);opacity:.5; } .thx__l:nth-child(9){ transform:translateZ(12.8px);opacity:.66; } .thx__l--face{ transform:translateZ(14.4px); opacity:1; filter:drop-shadow(0 6px 14px rgba(var(--accent-rgb),.45)); } .thx__t{ font-family:var(--fd); font-weight:800; font-size:clamp(.86rem,2.1vw,1.22rem); letter-spacing:.26em; color:var(--ink); margin:0; } .thx__s{ max-width:52ch; margin:0; font-size:.82rem; line-height:1.75; color:var(--mute); } @media (prefers-reduced-motion:reduce){ .thx__3d{ animation:none; transform:rotateX(8deg) rotateY(-18deg); } } /* on paper the stack collapses to one outline rather than ten */ @media print{ .thx__3d{ animation:none; transform:none; } .thx__l{ display:none; } .thx__l--face{ display:block; transform:none; opacity:1; filter:none; } } .foot__b{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:clamp(32px,5vw,56px); padding-top:24px; border-top:1px solid var(--hairw); } .foot__n{ display:flex; flex-wrap:wrap; gap:20px; } .foot__n a{ font-size:.58rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); transition:color .3s var(--e); } .foot__n a:hover{ color:var(--gold); } .foot__c{ font-size:.68rem; color:var(--mute); } /* ========================================================================== 09. OVERLAYS ========================================================================== */ /* ---- custom cursor: an exact dot plus a ring that lags behind it ---- */ /* -------------------------------------------------------------------- AURA — the pointer stays the system pointer. What follows it is a slow bloom of gold light with a comet tail, drifting a beat behind. Nothing here takes a click: the whole layer is pointer-events:none. -------------------------------------------------------------------- */ .aura{ position:fixed; inset:0; z-index:9993; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .8s var(--e); } .aura.lit{ opacity:1; } /* stand down while the intro, a lightbox or a video is up */ body.lock .aura,body.lock-init .aura{ opacity:0; } /* the big soft light. screen keeps it reading as light on the dark grounds and lets it fall away politely on the white casting page */ .aura__bloom{ position:absolute; top:0; left:0; width:760px; height:760px; margin:-380px 0 0 -380px; border-radius:50%; mix-blend-mode:screen; will-change:transform; background:radial-gradient(circle closest-side, rgba(var(--accent-rgb),.19), rgba(var(--accent-rgb),.09) 38%, rgba(13,27,61,.05) 62%, transparent 76%); } /* the tail. each bead chases the one in front of it */ .aura__t{ position:absolute; top:0; left:0; border-radius:50%; background:var(--gold); will-change:transform; } @media (max-width:1023px){ .aura{ display:none; } } /* ---- film grain: a whisper of texture over the whole page ---- */ .grain{ position:fixed; inset:-140%; z-index:9994; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1s steps(4) infinite; } @keyframes grain{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-3%,-2%); } 50%{ transform:translate(2%,-4%); } 75%{ transform:translate(-2%,3%); } } /* magnetic buttons lean toward the pointer */ [data-mag]{ will-change:transform; } .lb,.vm{ position:fixed; inset:0; z-index:9990; display:grid; place-items:center; background:rgba(4,10,8,.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transition:opacity .35s var(--e); } .lb{ padding:64px 80px; } .vm{ padding:5vw; z-index:9991; } .lb.open,.vm.open{ opacity:1; } .lb[hidden],.vm[hidden]{ display:none; } .lb__s{ display:grid; justify-items:center; gap:14px; max-width:100%; max-height:100%; } .lb__s img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:14px; border:1px solid var(--gold); box-shadow:0 40px 80px -20px rgba(0,0,0,.95); animation:lbin .5s var(--eo); } .lb__s img.ph{ width:min(70vw,760px); height:56vh; } @keyframes lbin{ from{ opacity:0; transform:perspective(900px) rotateX(10deg) translateZ(-80px); } } .lb__s figcaption{ font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); text-align:center; } .lb__x,.vm__x{ position:absolute; top:18px; right:26px; font-size:2.2rem; line-height:1; color:var(--soft); transition:color .3s var(--e), transform .3s var(--e); } .lb__x:hover,.vm__x:hover{ color:var(--gold); transform:rotate(90deg); } .lb__p,.lb__n{ position:absolute; top:50%; transform:translateY(-50%); } .lb__p{ left:20px; } .lb__n{ right:20px; } .lb__c{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--fd); font-weight:800; font-size:.9rem; letter-spacing:.18em; color:var(--mute); } /* --vm-ar is written by the player once the clip reports its real size, so a vertical dance reel opens tall instead of letterboxed inside a 16:9 box. */ .vm__b{ aspect-ratio:var(--vm-ar,1.7778); width:min(1120px, calc(100vw - 44px), calc(84vh * var(--vm-ar,1.7778))); position:relative; border-radius:18px; border:1px solid var(--hair); background:#000; display:grid; place-items:center; overflow:hidden; box-shadow:0 50px 90px -24px rgba(0,0,0,.95); } .vm__b video{ width:100%; height:100%; object-fit:contain; background:#000; } .vm__f{ position:absolute; inset:0; display:grid; place-content:center; gap:6px; text-align:center; padding:30px; color:var(--soft); font-size:.9rem; background:var(--green); } .vm__f code{ font-family:ui-monospace,Menlo,monospace; font-size:.82rem; color:var(--gold); } .vm__f[hidden]{ display:none; } .totop{ position:fixed; right:20px; bottom:20px; z-index:880; width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--gold-metal); color:var(--metal-ink); box-shadow:0 4px 0 var(--metal-rim), 0 16px 26px -10px rgba(0,0,0,.8); opacity:0; visibility:hidden; transform:translateY(14px); transition:all .4s var(--spring); } .totop.show{ opacity:1; visibility:visible; transform:none; } .totop:hover{ transform:translateY(-4px); } .totop .ico{ width:19px; height:19px; transform:rotate(-90deg); } /* ========================================================================== 09b. FRAME FILL — every photograph shows whole, head to feet The stills arrive in every shape there is: 9:20 phone video, 3:4 portraits, 3:2 stage frames. A single crop cannot hold them all, and cropping was cutting off heads and feet. So every frame now CONTAINS its picture — nothing is ever cut — and the space the shape leaves over is filled with a blurred, darkened copy of that same photograph. The frame reads as a lit plate the picture sits on, not as an empty letterbox, and the grid keeps its rhythm because the frames themselves never change shape. Injected by initFit() in script.js as the first child of each frame. ========================================================================== */ .fitbg{ position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background-color:var(--sunk); background-position:center; background-size:cover; background-repeat:no-repeat; transform:scale(1.3); filter:blur(26px) saturate(1.35) brightness(.42); box-shadow:inset 0 0 120px 40px rgba(5,15,12,.75); transition:opacity .8s var(--e), filter .6s var(--e), transform .8s var(--eo); } /* the fill lifts a little under the pointer — the photograph itself is never scaled, because scaling it inside a clipped frame would crop it again */ .pc:hover .fitbg, .gi:hover .fitbg, .mc:hover .fitbg, .cf__i.mid .fitbg, .player:hover .fitbg{ transform:scale(1.42); filter:blur(30px) saturate(1.5) brightness(.52); } /* a placeholder plate is already a full-bleed graphic — no fill behind it */ .fitbg.off{ opacity:0; } @media (prefers-reduced-motion:reduce){ .fitbg{ transition:none; } } /* ========================================================================== 10. RESPONSIVE · MOTION · A4 PRINT ========================================================================== */ @media (max-width:1180px){ .cred{ grid-template-columns:1fr; } .aud{ grid-template-columns:1fr; } .ct{ grid-template-columns:1fr; } .gg{ grid-auto-rows:18px; } } @media (max-width:900px){ .brg{ display:block; } .hdr.stuck{ background:var(--green); backdrop-filter:none; -webkit-backdrop-filter:none; } .nav{ position:fixed; inset:0 0 0 auto; width:min(330px,86vw); background:var(--card); border-left:1px solid var(--hair); padding:calc(var(--hh) + 26px) 28px 28px; overflow-y:auto; transform:translateX(100%); transition:transform .5s var(--eo); } .nav.open{ transform:none; } .nav ul{ flex-direction:column; align-items:stretch; gap:0; } .nav__a{ display:block; padding:16px 0; font-size:.72rem; border-bottom:1px solid var(--hairw); } .nav__a::after{ display:none; } .nav__a.on{ color:var(--gold); } .scrim{ position:fixed; inset:0; z-index:890; background:rgba(4,10,8,.72); opacity:0; transition:opacity .4s var(--e); } .scrim.open{ opacity:1; } .hero__in{ flex-direction:column; align-items:flex-start; } .duo,.duo--rev{ grid-template-columns:1fr; } .duo--rev > .cards{ order:2; } .cue{ display:none; } .gg{ grid-template-columns:repeat(6,1fr); } .gi{ grid-column:span 2; } .gi--t{ grid-row:span 16; } .gi--port,.gi--tallx,.gi--xtall,.gi--strip{ grid-column:span 2; } .gi--w,.gi--xl{ grid-column:span 6; grid-row:span 16; } .gnote,.gnote--tall{ grid-column:span 2; grid-row:span 8; } .cards--9{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:640px){ :root{ --gut:16px; --hh:62px; --r:14px; } body{ font-size:15px; } .sec{ padding:64px 0; } .sec[data-code]::after,.hero[data-code]::after{ font-size:.5rem; letter-spacing:.22em; } .hero{ padding:calc(var(--hh) + 38px) 0 78px; } .hero__cta .btn{ flex:1 1 100%; } .h3d{ text-shadow:1px 1px 0 #b4952f,2px 2px 0 #96802a,3px 3px 0 #786520, 4px 4px 10px rgba(0,0,0,.6); } .cf__i{ width:min(64vw,240px); } .gg{ grid-template-columns:repeat(4,1fr); grid-auto-rows:14px; gap:9px; } .gi{ grid-column:span 2; } .gi--t{ grid-row:span 16; } .gi--port,.gi--tallx,.gi--xtall,.gi--strip{ grid-column:span 2; } .gi--w,.gi--xl{ grid-column:span 4; grid-row:span 16; } .gi::after,.gi::before{ opacity:1; } .gnote,.gnote--tall{ grid-column:span 4; grid-row:span 8; } .f2{ grid-template-columns:1fr; } .kv > div{ grid-template-columns:1fr; gap:2px; } .cred__role{ flex-direction:column; gap:4px; } .flips{ grid-template-columns:repeat(2,1fr); } .flip{ height:104px; } .lb{ padding:60px 12px; } .lb__p{ left:6px; } .lb__n{ right:6px; } .foot__b{ flex-direction:column; text-align:center; } .foot__n{ justify-content:center; } } /* touch: no hover tilt, bigger targets, no custom cursor */ @media (pointer:coarse){ .aura{ display:none !important; } .grain{ display:none; } .tilt{ transform:none !important; } .btn,.fb,.rnd,.snd,.mc__p,.mc__f{ min-height:44px; min-width:44px; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .rv{ opacity:1; transform:none; } .tilt{ transform:none !important; } .grain{ display:none; } .cube{ animation:none; transform:rotateX(-18deg) rotateY(-24deg); } .orb{ animation:none; } } /* ========================================================================== PRINT — the portfolio as a PDF, in the colours it is actually seen in This used to strip the page to black on white, which is what you want from a printer and not at all what you want from a portfolio. It now prints what is on the screen: the theme that is switched on, the photographs, the grounds, the metal on the buttons. Two things make that work. print-color-adjust:exact, which is what tells a browser to lay down a background it would otherwise drop to save ink. And landscape, because the layout is built for a screen - A4 portrait is 794px of measure, which trips the phone breakpoint and prints the mobile site instead of this one. What still goes: anything position:fixed, which repeats on every sheet; anything that needs a pointer; and the 3D carousel, which is a stack of rotated planes and flattens to a contact sheet instead. ========================================================================== */ @page{ size:A4 landscape; margin:0; } @media print{ /* lay down every ground, gradient and photograph as drawn */ *,*::before,*::after{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; } .intro,.hdr,.aura,.grain,.prog,.totop,.cue,.lb,.vm,.brg,.scrim,.snd,.thm, .pbtn,.mc__p,.mc__f,.zi,.cf__bar,.cf__hint,.fil,.form,.ctas,.hero__hint, /* and any line that asks the reader to hover, drag or tap something */ .onscreen { display:none !important; } html,body{ overflow:visible !important; height:auto !important; } body{ font-size:10pt; } /* The bands run on rather than each claiming a sheet of its own. Forcing a break after every one of seventeen sections left half of them mostly empty - a page of three cards and then two thirds of nothing. The content flows instead, and the guards below are what keep anything from being cut by a page edge. Only the hero takes a sheet to itself, because it is the cover. */ .sec,.foot{ padding:9mm !important; min-height:auto !important; } .hero{ break-after:page; page-break-after:always; } .wrap{ max-width:none; padding:0; } /* everything arrives already revealed and already flat */ .rv{ opacity:1 !important; transform:none !important; } .tilt{ transform:none !important; } .scene,.rquad,.mgrid,.gg,.cards{ perspective:none !important; } /* Nothing with a border round it may be cut by a page edge. Left alone a card simply runs off the bottom of one sheet and resumes on the next, which is how the three casting cards ended up sawn in half and their last centimetre stranded alone on the page after. A card that will not fit moves whole instead. */ .wbox,.slab,.pc,.gi,.gnote,.mc,.rcard,.chip3d,.flip,.cf__i, .card3d,.bill,.cred__art,.cred__body,.player__in,.player,.wboxes,.range, .kv > div,.rquad,.role,.pl__art { break-inside:avoid; page-break-inside:avoid; } /* and a heading never sits alone at the foot of a sheet */ h1,h2,h3,.ttl,.eyebrow{ break-after:avoid; page-break-after:avoid; } /* THE HERO — the stage prints whole, held to one sheet */ .hero{ height:192mm !important; display:block !important; position:relative; } .hero__stage{ position:absolute !important; inset:0 !important; transform:none !important; } .hero__giant{ top:30% !important; font-size:88pt !important; } .hero__cut{ height:150mm !important; } .hero__in{ position:absolute !important; left:9mm; bottom:11mm; width:52%; z-index:4; } /* THE CAROUSEL — a stack of rotated planes on screen, a contact sheet here */ .cf{ perspective:none !important; } .cf__stage{ height:auto !important; display:flex !important; flex-wrap:wrap; gap:4mm; justify-content:center; transform-style:flat !important; } .cf__i{ position:static !important; transform:none !important; opacity:1 !important; height:46mm !important; width:auto !important; margin:0 !important; } .cf__i::after,.cf__floor{ display:none !important; } /* the flip cards print the value rather than the label they hide it behind */ .flip{ height:auto; perspective:none; } .flip__in{ transform:none !important; } .flip__f{ display:none; } .flip__b{ position:static; transform:none; padding:5mm 4mm; } .rpc figcaption{ opacity:1 !important; } /* THE GALLERY — a spanning grid on screen, a contact sheet here. CSS grid does not reflow across a page boundary: a masonry wall whose tiles each refuse to be cut simply jumps them to the next sheet and leaves the holes behind, which is how eighty-seven photographs came to need twenty pages with half of each one empty. Held to a common height and allowed to wrap, they fill the sheet instead. */ .gg{ display:flex !important; flex-wrap:wrap; gap:3.5mm; align-content:flex-start; grid-template-columns:none !important; grid-auto-rows:auto !important; } .gi,.gnote{ grid-row:auto !important; grid-column:auto !important; height:44mm !important; width:auto !important; margin:0 !important; } .gi img{ height:100% !important; width:auto !important; object-fit:cover; } .gnote{ width:58mm; display:grid; place-content:center; } .gi::after{ display:none !important; } /* the theatre stack the same way, rather than one plate to a sheet */ .pl__art{ height:96mm !important; width:auto !important; } .pl__art img{ height:100% !important; width:auto !important; object-fit:cover; } /* .fitbg is a blurred second copy of every photograph, sat behind it to fill the frame. On screen that is one extra paint; in a PDF it is a second full-resolution embed of all hundred-odd of them, which is most of the file. The frames letterbox on their own ground instead. */ .fitbg{ display:none !important; } /* a CSS filter on an forces the browser to rasterise that image rather than hand the PDF the file it already has, which is how a 14MB folder of photographs became a 118MB document. The grade is worth a few percent of saturation on screen and nothing at all on paper. */ .gi img,.pc img,.rpc img,.mc__img img,.cf__i img, .player__in img,.cred__art img,.stack__face img{ filter:none !important; } /* the section code stops being a floated tab and becomes a line of type */ .sec[data-code]::after,.hero[data-code]::after{ position:static !important; display:block; margin-bottom:5mm; opacity:1; font-size:7pt; } /* a link on paper has to say where it goes */ a[href^="http"]::after{ content:' (' attr(href) ')'; font-size:6.5pt; opacity:.7; } /* but not inside a button, where the label is the point and a forty character URL set after it is just noise */ a[href^="#"]::after,a[href^="mailto"]::after,a[href^="tel"]::after, .btn::after,.soci__a::after,.socs a::after{ content:none !important; } } /* header, once it sticks */ /* the extruded heading: white letters vanish on cream, so the face goes navy and keeps a gold cut under it */ /* buttons: gold the primary, royal blue the secondary, and the CTA on the palette's own red-to-orange gradient */ /* chips: light plates on the cream, except the solid one, which becomes the royal blue card the palette shows */ /* filter buttons and the two small round buttons in the header */ /* the plates stacked behind the hero portrait — purple and blue in place of the two greens */ /* the coverflow's front frame */ /* the gallery slogans: the cloud takes gold with a breath of purple */ /* the flip cards are built dark-backed with white type */ /* form: fields inset on silver, and the palette red for anything wrong */ /* overlays: a cream scrim, so opening a photograph does not black the room out */ /* the blurred fill behind a contained photograph is darkened for the dark ground; on cream it sits just under white */ /* every raised surface is bedded on near-black; on paper it beds on warm grey */ /* the contact card is built as a dark plate with a green cube; on cream it becomes a white card with the palette's gold rule and a royal blue cube */ /* the theatre billboard is a deep red plate; here it takes the palette's red-to-orange wash, laid back far enough to read dark type on it */ /* small pill links */ /* the screen credit is a navy plate carrying its data; on cream it becomes a white card, or the type — which is navy in this theme — sits invisible on navy */ /* ---- the pointer ---- Dark theme: a gold bloom in SCREEN — light added to a dark room — with a comet tail chasing it. On paper the bloom is simply a smudge behind the cursor, so the light theme drops it altogether: no circle, nothing under the pointer at rest. What is left is the trail alone, royal blue beads that appear only while the pointer is moving and fade as it stops. */ /* the trail is driven frame by frame in script.js, so the fade-in transition would only lag behind the pointer here */ /* each bead's own glow is written per bead in script.js, which repaints it when the theme changes — a stylesheet rule cannot reach an inline style */ /* ========================================================================== 11b. LIGHT THEME — TYPE, PHOTOGRAPHS AND THE RHYTHM OF THE GROUNDS -------------------------------------------------------------------------- The palette alone was not enough. Three things were still built for a dark room and had to be re-cut for paper: TYPE — 300 weight is elegant as white on black and turns grey and thin as ink on cream. Body copy goes to 400, the labels take the royal blue instead of a gold that was fighting the ground, and the extruded heading loses four of its seven layers: on white, depth reads as mud long before it reads as depth. PHOTO — every picture carried a filter that dimmed and desaturated it for a dark ground (brightness .70 to .94). On cream that made them look muddy and underexposed. They are handed back their own light here, with a whisper of contrast instead. GROUND — five sections were five near-identical creams, so the page had no rhythm. They now alternate white, cream and a tinted band, which is what the palette sheet does with its own panels. ========================================================================== */ /* ---- type ---- */ /* the section label takes the royal blue and keeps a gold rule beside it — gold on gold-tinted cream had nothing to push against */ /* the big number on a chip is the palette's blue; its caption keeps the gold */ /* three gold steps, not seven, and no glow: crisp on paper */ /* ---- photographs ---- */ /* the blurred fill behind a contained picture: a pale surround on paper, not the dark vignette the black ground wanted */ /* the gallery's resting scrim only has to carry the frame number, so it is lighter here and the number takes the palette gold that sits on it */ /* ---- the rhythm of the grounds ---- */ /* ====================================================================== ENLARGE — EVERY PHOTOGRAPH, EVERY DEVICE The gallery grid could always be opened full size. Everywhere else a picture either grew under the cursor or did nothing at all, and that growth is switched off on touch hardware — so on a phone most of the photographs on this site could not be looked at properly. script.js marks every frame that opens the viewer with .zoomable, so the promise a picture makes is the same on a desk and in a hand. ====================================================================== */ .zoomable{ position:relative; cursor:zoom-in; outline:none; } .zoomable img{ transition:filter .45s var(--e); } .zoomable:hover img, .zoomable:focus-visible img{ filter:saturate(1.06) contrast(1.03) brightness(1.06); } .zoomable:focus-visible{ box-shadow:0 0 0 2px var(--gold), 0 0 0 6px rgba(var(--accent-rgb),.22); } /* The corner mark: a plus on a soft plate, in the gallery's gold. It sits top-right because every caption on the page runs along the bottom. */ .zi{ position:absolute; z-index:7; top:9px; right:9px; width:26px; height:26px; border-radius:8px; pointer-events:none; border:1px solid rgba(var(--accent-rgb),.55); background: linear-gradient(var(--gold),var(--gold)) center/11px 1.6px no-repeat, linear-gradient(var(--gold),var(--gold)) center/1.6px 11px no-repeat, rgba(5,15,12,.74); opacity:0; transform:scale(.82) translateY(-3px); transition:opacity .3s var(--e), transform .3s var(--e); } .zoomable:hover .zi, .zoomable:focus-visible .zi{ opacity:1; transform:none; } /* A sub-frame in the two-by-two is small; the mark scales with it so it never crowds the picture it belongs to. */ .rpc > .zi{ width:20px; height:20px; top:6px; right:6px; border-radius:6px; background-size:8px 1.4px, 1.4px 8px, auto; } /* There is no hover on a phone, so the mark simply stays visible: it is the only thing telling a thumb that the picture opens. */ @media (pointer:coarse){ .zoomable{ cursor:default; } .zi{ opacity:.75; transform:none; } } @media (max-width:640px){ .zi{ width:23px; height:23px; top:7px; right:7px; } } @media (prefers-reduced-motion:reduce){ .zoomable img, .zi{ transition:none; } } @media print{ .zi{ display:none; } } /* ---- light ground: the plate lifts instead of sinking ---- */ /* ---- the closing cross needs a box, not just a glyph ---------------- It was sized only by the character inside it, which came out around 35px — under the 44px a fingertip is entitled to. The mark keeps its place; what grows is the area that answers to a thumb. The rotation on hover has to be restated because the centring transform would otherwise overwrite it. */ .lb__x,.vm__x{ display:grid; place-items:center; padding:0; width:46px; height:46px; border-radius:50%; top:14px; right:20px; } .lb__x:hover,.vm__x:hover{ transform:rotate(90deg); } @media (pointer:coarse){ .lb__x,.vm__x{ width:50px; height:50px; top:10px; right:12px; } .lb__p,.lb__n{ min-width:48px; min-height:48px; } } /* ====================================================================== THE PLAYBILL AND ITS POSTER The bill used to stand alone in the middle of the stage section, a card of type with nothing of the play on it. The poster the run was actually sold on now sits beside it, in the pairing the screen credit already uses further down the page - artwork to one side, the record to the other - so the two read as one habit rather than two ideas. The poster carries the date, the venue and the ticketing in its own artwork, which is why none of that is repeated in the bill. ====================================================================== */ .playbill{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(24px,3.6vw,48px); align-items:center; } .pl__art{ position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(var(--accent-rgb),.34); transform-style:preserve-3d; box-shadow:0 4px 0 #0d0303, 0 34px 60px -20px rgba(0,0,0,.95); } /* the shape comes from the picture itself: trueShape() writes --ar, and contain keeps a poster a poster - it is never cropped to fit a box */ .pl__art img{ position:relative; z-index:1; width:100%; height:auto; aspect-ratio:var(--ar,4/5); object-fit:contain; object-position:center; } .pl__badge{ position:absolute; top:14px; left:14px; z-index:2; transform:translateZ(24px); background:var(--gold-metal); color:var(--metal-ink); border-radius:8px; font-size:.52rem; font-weight:700; letter-spacing:.22em; padding:6px 12px; box-shadow:0 3px 0 var(--metal-rim); } /* in the pair the bill is no longer a lone centred card, so it gives up the width cap and the auto margins that centred it */ .playbill .bill{ max-width:none; margin-inline:0; } /* one column below the width the screen credit also folds at, and the poster is held to a readable width rather than filling the measure */ @media (max-width:1180px){ .playbill{ grid-template-columns:1fr; } .pl__art{ max-width:430px; margin-inline:auto; } } @media (max-width:640px){ .pl__art{ max-width:none; } .pl__badge{ top:10px; left:10px; } } /* ---- light ground ---- */ @media print{ .playbill{ grid-template-columns:1fr; } .pl__art{ background:#fff !important; border-color:#c9c9c9 !important; box-shadow:none !important; } .pl__badge{ display:none; } } /* ====================================================================== THE GALLERY WALL — every photograph, sorted The wall used to hold twenty-one of the eighty-seven photographs in the folder, under four headings. It now holds all of them, under five, with a count on each so the size of a category is legible before it is opened. Duplicates were dropped: nineteen pictures sat under two or three filenames apiece, and the wall shows each of them once. ====================================================================== */ /* the tally sits inside its own tab on the filter, so the word stays the thing you read and the number is the thing you check */ .fb i{ font-style:normal; margin-left:9px; padding:2px 7px; border-radius:6px; font-size:.86em; font-weight:700; letter-spacing:.06em; background:rgba(var(--accent-rgb),.15); color:var(--gold); transition:background .3s var(--e), color .3s var(--e); } .fb:hover i{ background:rgba(var(--accent-rgb),.24); } /* on the lit filter the tab reverses out of the gold rather than onto it */ .fb.on i{ background:rgba(26,20,5,.26); color:#231a06; } /* A number and a category told you where you were, not what you were looking at. The caption the viewer already carries says both, so the corner now reads "07 · Karuna — Compassion" and the wall can be read without opening anything. */ .gi::after{ content:attr(data-cap); right:12px; max-width:calc(100% - 24px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* eighty-seven frames need a little more air between them than twenty-one did, and a slightly finer row so the wall packs without gaps */ .gg{ gap:18px; } @media (max-width:640px){ .fb{ padding:9px 13px; font-size:.55rem; letter-spacing:.12em; } .fb i{ margin-left:6px; padding:2px 5px; } .gg{ gap:10px; } .gi::after{ font-size:.48rem; letter-spacing:.14em; left:9px; right:9px; bottom:8px; } } /* ====================================================================== WHAT THE FRAME IS DOING A wall of eighty-seven photographs says what the work looks like but not what it is for. Each frame now carries the feeling it was made to hold - Longing, Panic, Valour - across the top of the picture, so the wall can be read as a range of expression rather than as a contact sheet. It is a real node, not a pseudo-element: .gi spends ::before on the wash that lifts the caption and ::after on the caption itself. ====================================================================== */ .gi__e{ position:absolute; top:14px; left:14px; z-index:5; transform:translateZ(30px); /* rides forward with the tilt */ max-width:calc(100% - 20px); padding:5px 10px; border-radius:8px; font-size:.5rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--gold); background:rgba(5,15,12,.74); border:1px solid rgba(var(--accent-rgb),.42); box-shadow:0 2px 10px -4px rgba(0,0,0,.9); /* The label is a caption, not a control: it never takes the pointer, so the whole frame under it stays one click target. */ pointer-events:none; opacity:.94; transition:opacity .35s var(--e), border-color .35s var(--e); } .gi:hover .gi__e{ opacity:1; border-color:var(--gold); } /* the wash under the caption is drawn from the foot of the tile, so a label at the head needs its own footing on a pale photograph */ .gi__e::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); } @media (max-width:900px){ .gi__e{ font-size:.46rem; letter-spacing:.16em; padding:4px 8px; top:8px; left:8px; } } @media (max-width:640px){ .gi__e{ font-size:.42rem; letter-spacing:.12em; padding:3px 7px; top:7px; left:7px; max-width:calc(100% - 14px); } } @media (prefers-reduced-motion:reduce){ .gi__e{ transition:none; } } @media print{ .gi__e{ position:static; display:inline-block; transform:none; color:#8a6c2f !important; background:none !important; border:0 !important; box-shadow:none !important; padding:0 0 4px; } .gi__e::before{ display:none; } } /* ====================================================================== THE WALL AS A WALL, NOT A CONTACT SHEET Every tile used to take the shape of the picture inside it, and since sixty of the eighty-seven photographs are upright, the wall came out as column after column of the same tall rectangle. The frames are now designed - full-width bands, half-width landscapes, squares, uprights, and a narrow strip for the nine emotions - and the photograph is cropped to the frame it is given. Widths above one column belong to landscape frames only, so the wall never grows a hero. ====================================================================== */ .gi--band { grid-column:span 10; } /* the cinematic frame, edge to edge */ .gi--wide { grid-column:span 5; } /* half the wall, 16:9 */ .gi--sq{ grid-column:span 2; } /* the square keeps its own width */ /* EVERY UPRIGHT, ONE COLUMN WIDTH — four across, all the same strip. They used to be three widths and four heights, which made a ragged masonry; one width and one height makes a row. */ .gi--port, .gi--tallx, .gi--xtall, .gi--strip{ grid-column:span 2; } /* five across, as the reference has */ /* --- and butted together, the way a contact strip is --------------------- The wall sets a 16px gutter between every cell. An upright pulls half of it back on each side, so the one beside it closes the whole gap and the run reads as a single band rather than four framed pictures. The frame goes with the gutter: no radius, no border, no lift - the only thing separating one face from the next is the edge of the photograph. The quote cards take the same treatment, since they stand in the same rows and a gap under one of them would break the band just as surely. */ .gi--port,.gi--tallx,.gi--xtall,.gi--strip{ /* not closed shut: the reference leaves a hairline of ground showing between one face and the next. The wall's gutter is 16px, so each strip pulls five of it back on either side and six are left - enough to read as a seam, not enough to read as a margin. */ margin:-5px; border-radius:0; border:0; /* the light does not stop at the edge - it carries across the seam */ box-shadow:7px 0 20px -7px rgba(var(--accent-rgb),.55); } /* --- THE SEAM LIGHT ------------------------------------------------------- The eight pixels between two strips are just ground showing through, and ground is the one thing that cannot tell you where one face ends. So the right edge of every strip carries a thin line of the accent and throws a glow across the gap into its neighbour, and a short bright run travels down it - the spark. It is laid into ::before, which was already carrying the caption scrim, because ::after is spent on the category and a strip has only the two. The starts are staggered so the sparks fall down the wall rather than marching in step. -------------------------------------------------- */ .gi--port::before,.gi--tallx::before,.gi--xtall::before,.gi--strip::before{ border-radius:0; opacity:1; background: /* the spark */ linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0) 18%, var(--gold-lt) 50%, rgba(var(--accent-rgb),0) 82%, transparent) no-repeat, /* the line it runs down */ linear-gradient(180deg, rgba(var(--accent-rgb),.55), rgba(var(--accent-rgb),.18)) no-repeat, /* and the scrim that was here before it */ linear-gradient(transparent 45%, rgba(5,15,12,.85)); background-size:2px 34%, 2px 100%, 100% 100%; animation:seamspark 5.5s linear infinite; } @keyframes seamspark{ from{ background-position:100% -40%, 100% 0, 50% 50%; } to { background-position:100% 140%, 100% 0, 50% 50%; } } /* the last strip in a row has no neighbour to light, but the wall does not know where its rows break, so every strip lights its own right edge and the band ends on one. */ .gi--port:nth-child(3n)::before,.gi--tallx:nth-child(3n)::before, .gi--xtall:nth-child(3n)::before,.gi--strip:nth-child(3n)::before{ animation-delay:-1.8s; } .gi--port:nth-child(3n+1)::before,.gi--tallx:nth-child(3n+1)::before, .gi--xtall:nth-child(3n+1)::before,.gi--strip:nth-child(3n+1)::before{ animation-delay:-3.6s; } @media (prefers-reduced-motion:reduce){ .gi--port::before,.gi--tallx::before,.gi--xtall::before,.gi--strip::before{ animation:none; background-position:100% 50%, 100% 0, 50% 50%; } } @media print{ .gi--port::before,.gi--tallx::before,.gi--xtall::before,.gi--strip::before{ animation:none; background:linear-gradient(transparent 45%, rgba(5,15,12,.85)); } } .gi--port:hover,.gi--tallx:hover,.gi--xtall:hover,.gi--strip:hover{ border:0; box-shadow:9px 0 26px -6px rgba(var(--accent-rgb),.8); } /* with the border gone the hover needs something else to say "this one": the frame lifts its own picture out of the grade instead */ .gi--port:hover img,.gi--tallx:hover img, .gi--xtall:hover img,.gi--strip:hover img{ filter:saturate(1.12) contrast(1.02) brightness(1.14); } /* A designed frame crops. The bias is high on the face because these are portraits: centred, a square taken out of a 2:3 upright cuts the head. */ .gi[data-ar] img{ object-fit:cover; object-position:center 30%; } /* in a band of strips the faces have to line up, so an upright crops higher than a landscape does - the head sits in the upper third of every one of them */ .gi--port img,.gi--tallx img,.gi--xtall img,.gi--strip img{ object-position:center 18%; } .gi--wide[data-ar] img, .gi--band[data-ar] img{ object-position:center 40%; } /* six columns: the band and the landscape frame both run the full width, uprights go half, and the strip drops from six across to three */ @media (max-width:900px){ .gi--band,.gi--wide{ grid-column:span 6; } .gi--sq{ grid-column:span 2; } .gi--port,.gi--tallx,.gi--xtall,.gi--strip{ grid-column:span 2; } } /* four columns: two uprights to a row, the strip likewise, and a band that would otherwise be a slot rather than a frame */ @media (max-width:640px){ .gi--band,.gi--wide{ grid-column:span 4; } .gi--sq,.gi--port,.gi--tallx,.gi--xtall,.gi--strip{ grid-column:span 2; } } /* A photograph can be cropped to the frame it is given; a poster cannot. The artwork carries the date, the venue and the ticketing along its own edges, and the row height is quantised to whole grid rows, so even a frame cut to the poster's exact ratio lands a couple of per cent out. This one is contained instead, and the blurred fill behind covers the remainder the way it does everywhere else on the page. */ .gi--whole[data-ar] img{ object-fit:contain; object-position:center; } /* ====================================================================== DARK THEME - 01 · GLOBAL WEB DESIGN Dark · red · black · white · silver · navy Six colours, and only three of them can be read at the size this page sets its labels, eyebrows and rules: white 19.68 silver 10.82 steel 7.75 crimson 4.19 blood red 3.44 dark red 1.97 navy light 1.90 navy blue 1.26 dark maroon 1.47 So white is the type and silver the second voice, exactly as the sheet assigns them. Crimson takes the accent, kept as given for every rule, border and fill, with the small uppercase alone eighteen percent lighter to clear 4.5:1 on both the black and the charcoal. Dark red and navy are never asked to be type at all - at 1.97:1 and 1.26:1 they are buttons, bands and borders, which is what the sheet calls them. Black #0B0B0B Background Charcoal #1A1A1A Surface — cards and sections White #FFFFFF Text Primary Silver #C0C0C0 Text Secondary Crimson #E11D48 the accent Dark Red #8B0000 Primary — buttons and highlights Navy Blue #001F5B Secondary — borders, and the badges Dark Maroon #660000 the ledge the metal stands on ====================================================================== */ html[data-theme="dark"]{ --accent-rgb: 225,29,72; --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.8L21.5 11l-6.9 2.2L12 20l-2.6-6.8L2.5 11l6.9-2.2z' fill='%23E11D48'/%3E%3C/svg%3E"); --silver: #C0C0C0; /* Silver — Text Secondary, 10.82:1 */ --gold: #E11D48; /* Crimson — the accent. 4.19:1 on the black, so right for a rule, a border or a fill, and a whisker short for the small type. */ /* eighteen percent lighter on the same hue clears 4.5:1 on the black AND the charcoal, so the small uppercase takes this and everything else keeps the palette colour exactly as given */ --gold-ink: #E74568; --green: #0B0B0B; /* Black — Background, in the forest's role */ --navy: #1A1A1A; /* Charcoal — Surface */ --white: #FFFFFF; /* White — Text Primary */ --purple: #001F5B; /* Navy Blue — 1.26:1, a border and a fill only */ --accent-2: #001F5B; /* Navy Blue — the palette's second colour */ --red: #8B0000; /* Dark Red — Primary: buttons, highlights */ --black: #0B0B0B; --card: #1A1A1A; --card-hi: #242424; --sunk: #121212; --gold-lt: #E74568; /* crimson lifted, for the hover */ --gold-dk: #8B0000; /* Dark Red — 1.97:1, a fill and nothing else */ /* the palette's own Red Gradient, dark red into crimson */ --gold-metal: linear-gradient(135deg,#8B0000 0%,#E11D48 100%); /* every stop of that is dark enough to be written on in white */ --metal-ink: #FFFFFF; --metal-rim: #660000; --ink: #FFFFFF; --soft: rgba(255,255,255,.74); --mute: #C0C0C0; --hair: rgba(225,29,72,.34); /* the accent drawn as a line */ --hairw:#001F5B; /* Border, drawn off the deep forest */ } /* ---- the grounds ---------------------------------------------------- The base paints each band with a literal, so each one is restated here on black and charcoal. Each band keeps its own tint, but all of them are struck off the same near-black, which is what lets the crimson read as light rather than as paint. */ html[data-theme="dark"] body { background:#0B0B0B; } html[data-theme="dark"] .sec--deep { background:linear-gradient(180deg,#1A1A1A 0%,#0B0B0B 100%); } html[data-theme="dark"] .sec--green { background:linear-gradient(180deg,#101010,#0B0B0B); } html[data-theme="dark"] .sec--forest{ background:linear-gradient(168deg,#0B0B0B 0%,#1A1A1A 50%,#0B0B0B 100%); } html[data-theme="dark"] .sec--navy { background:linear-gradient(168deg,#0B0B0B 0%,#1F1F1F 52%,#0B0B0B 100%); } html[data-theme="dark"] .sec--red { background:linear-gradient(168deg,#0B0B0B 0%,#1E0B0B 50%,#0B0B0B 100%); } html[data-theme="dark"] .foot { background:linear-gradient(180deg,#0B0B0B,#070707); } html[data-theme="dark"] .intro { background:radial-gradient(ellipse at 50% 40%,#232323,#0B0B0B 70%); } /* the name is a surface, and a surface needs light: these are the four stops it is lit by, restated per theme so it reads on either ground */ html[data-theme="dark"] .hero__giant{ --g1:rgba(255,255,255,.50); --g2:rgba(255,255,255,.28); --g3:rgba(225,29,72,.40); --g4:rgba(255,255,255,.18); } /* the palette calls black the ground and charcoal a surface, so the hero takes a red bloom off the black rather than a wash of it */ html[data-theme="dark"] .hero { background: radial-gradient(ellipse 60% 54% at 50% 42%, rgba(225,29,72,.09), transparent 72%), radial-gradient(ellipse at 22% 34%,#2A0A0A 0%,#121212 46%,#0B0B0B 100%); } /* The casting band is the one section written as light-on-dark rather than the reverse, and it keeps that inversion: pale paper set into the night, which is where the crimson earns its keep. Its lede was hard-coded to a forest ink. */ html[data-theme="dark"] .sec--white .lede{ color:rgba(11,11,11,.72); } /* ---- surfaces the base paints with a literal ---- */ html[data-theme="dark"] .wbox{ background:#1A1A1A; color:#FFFFFF; border-color:rgba(255,255,255,.14); } html[data-theme="dark"] .bill{ background:linear-gradient(158deg,#2A0A0A,#170808); border-color:rgba(139,0,0,.7); } html[data-theme="dark"] .cred__body{ background:linear-gradient(158deg,#1E1E1E,#121212); border-color:rgba(255,255,255,.14); } html[data-theme="dark"] .card3d__cube{ background:linear-gradient(158deg,#2A2A2A,#1A1A1A); } /* ---- the plates my own components sit on ---- */ html[data-theme="dark"] .gi__e{ background:rgba(11,11,11,.78); border-color:rgba(225,29,72,.42); color:#E11D48; box-shadow:0 2px 10px -4px rgba(0,0,0,.9); } html[data-theme="dark"] .zi{ background:linear-gradient(#E11D48,#E11D48) center/11px 1.6px no-repeat, linear-gradient(#E11D48,#E11D48) center/1.6px 11px no-repeat, rgba(11,11,11,.78); border-color:rgba(225,29,72,.5); box-shadow:none; } html[data-theme="dark"] .rpc > .zi{ background-size:8px 1.4px, 1.4px 8px, auto; } html[data-theme="dark"] .fb i{ background:rgba(225,29,72,.16); color:#E11D48; } html[data-theme="dark"] .fb.on i{ background:rgba(11,11,11,.3); color:#FFFFFF; } html[data-theme="dark"] .pl__art{ border-color:rgba(225,29,72,.34); box-shadow:0 4px 0 #030303, 0 34px 60px -20px rgba(0,0,0,.95); } /* ---- Every rule in the base sheet that names a colour outright - the forest greens, the navies, the crimson and the gold - restated on black, charcoal, dark red and crimson. Generated from the sheet itself, so each literal is accounted for, not guessed at. Rules given a ground above keep it: only their depth is restated. ---- */ html[data-theme="dark"] .raise{ box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 2px 0 #030303, 0 4px 0 #0A0A0A, 0 8px 0 #050505, 0 26px 40px -14px rgba(0,0,0,.85); } html[data-theme="dark"] .h3d{ text-shadow: 1px 1px 0 #E11D48, 2px 2px 0 #E74568, 3px 3px 0 #E11D48, 4px 4px 0 #C81D2E, 5px 5px 0 #A81026, 6px 6px 0 #660000, 7px 7px 0 #8B0000, 8px 8px 14px rgba(0,0,0,.6), 0 0 42px rgba(225,29,72,.22); } html[data-theme="dark"] .h3d--dark{ text-shadow: 1px 1px 0 #E74568, 2px 2px 0 #E11D48, 3px 3px 0 #E11D48, 4px 4px 0 #E74568, 5px 5px 0 #E11D48, 6px 6px 10px rgba(11,11,11,.3); } html[data-theme="dark"] .sec--white .lede{ color:rgba(11,11,11,.7); } html[data-theme="dark"] .btn--gold{ box-shadow:0 3px 0 #660000, 0 12px 24px -8px rgba(225,29,72,.4); } html[data-theme="dark"] .btn--gold:hover{ box-shadow:0 6px 0 #660000, 0 20px 32px -10px rgba(225,29,72,.5); } html[data-theme="dark"] .btn--navy{ background:linear-gradient(158deg,#1E1E1E,var(--navy)); border-color:#2A2A2A; box-shadow:0 3px 0 #030303, 0 12px 24px -8px rgba(11,11,11,.9); } html[data-theme="dark"] .btn--navy:hover{ box-shadow:0 6px 0 #030303, 0 20px 32px -10px rgba(0,31,91,.5); } html[data-theme="dark"] .btn--red{ box-shadow:0 3px 0 #660000, 0 12px 24px -8px rgba(139,0,0,.6); } html[data-theme="dark"] .btn--red:hover{ box-shadow:0 6px 0 #660000, 0 20px 32px -10px rgba(139,0,0,.7); } html[data-theme="dark"] .btn--dark{ box-shadow:0 3px 0 rgba(11,11,11,.5), 0 12px 24px -8px rgba(11,11,11,.6); } html[data-theme="dark"] .chip3d{ box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 3px 0 #030303, 0 10px 18px -8px rgba(0,0,0,.8); } html[data-theme="dark"] .chip3d:hover{ box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 7px 0 #030303, 0 20px 28px -10px rgba(0,0,0,.85); } html[data-theme="dark"] .chip3d--red{ background:linear-gradient(158deg,#2A0A0A,#170808); border-color:rgba(139,0,0,.6); } html[data-theme="dark"] .chip3d--green{ background:linear-gradient(158deg,#2A2A2A,#1A1A1A); border-color:rgba(225,29,72,.7); } html[data-theme="dark"] .chip3d--navy{ background:linear-gradient(158deg,#1E1E1E,#121212); border-color:rgba(0,31,91,.7); } html[data-theme="dark"] .chip3d--dark{ background:linear-gradient(158deg,#202020,var(--green)); border-color:rgba(11,11,11,.4); box-shadow:0 3px 0 rgba(11,11,11,.35), 0 10px 18px -8px rgba(11,11,11,.4); } html[data-theme="dark"] .rnd{ box-shadow:0 3px 0 #030303, 0 10px 18px -8px rgba(0,0,0,.8); } html[data-theme="dark"] .cube__f{ background:linear-gradient(158deg,rgba(26,26,26,.9),rgba(11,11,11,.92)); box-shadow:0 0 34px rgba(225,29,72,.15) inset; } html[data-theme="dark"] .cube__f--tp{ background:linear-gradient(158deg,#2A2A2A,#1A1A1A); } html[data-theme="dark"] .cube__f--bt{ background:linear-gradient(158deg,#121212,#0B0B0B); } html[data-theme="dark"] .prog{ box-shadow:0 0 12px rgba(225,29,72,.7); } html[data-theme="dark"] .hdr.stuck{ background:rgba(11,11,11,.88); } html[data-theme="dark"] .logo__cube{ box-shadow:0 3px 0 #030303, 0 8px 16px -6px rgba(0,0,0,.8); } html[data-theme="dark"] .orb--a{ background:rgba(225,29,72,.13); } html[data-theme="dark"] .orb--b{ background:rgba(11,11,11,.55); } html[data-theme="dark"] .stack__glow{ background:rgba(225,29,72,.3); } html[data-theme="dark"] .stack__back{ background:linear-gradient(158deg,rgba(11,11,11,.7),rgba(11,11,11,.9)); } html[data-theme="dark"] .stack__mid{ background:linear-gradient(158deg,rgba(26,26,26,.75),rgba(11,11,11,.9)); } html[data-theme="dark"] .cf__i::after{ background:linear-gradient(180deg,transparent 40%,rgba(11,11,11,.7)); } html[data-theme="dark"] .cf__i.mid{ box-shadow:0 40px 70px -20px rgba(0,0,0,.95), 0 0 60px rgba(225,29,72,.25); } html[data-theme="dark"] .cf__floor{ background:radial-gradient(ellipse,rgba(225,29,72,.15),transparent 70%); } html[data-theme="dark"] .slab{ box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 3px 0 #030303, 0 6px 0 #070707, 0 28px 44px -16px rgba(0,0,0,.9); } /* .kv--dark is the dark-ink variant, written for the pale card the base sheet gives .wbox. This theme repaints that card deep forest, so the ink has to turn over with it - left alone it is near-black on near-black. */ html[data-theme="dark"] .kv--dark > div{ border-bottom-color:rgba(255,255,255,.14); } html[data-theme="dark"] .kv--dark dt{ color:rgba(255,255,255,.6); } html[data-theme="dark"] .kv--dark dd{ color:#FFFFFF; } html[data-theme="dark"] .pc{ box-shadow:0 3px 0 #030303, 0 22px 34px -14px rgba(0,0,0,.9); } html[data-theme="dark"] .pc figcaption{ background:linear-gradient(transparent,rgba(11,11,11,.94)); } html[data-theme="dark"] .pc::before{ border:1px solid rgba(225,29,72,.14); } html[data-theme="dark"] .pc:hover::before{ border-color:rgba(225,29,72,.42); } html[data-theme="dark"] .pc:hover figcaption i{ text-shadow:0 0 14px rgba(225,29,72,.65); } html[data-theme="dark"] .rcard{ box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 3px 0 #030303, 0 6px 0 #070707, 0 22px 34px -16px rgba(0,0,0,.9); } html[data-theme="dark"] .rpc{ box-shadow:0 2px 0 #030303, 0 10px 16px -10px rgba(0,0,0,.85); } html[data-theme="dark"] .rpc:focus-visible{ border-color:rgba(225,29,72,.55); box-shadow:0 3px 0 #030303, 0 40px 66px -16px rgba(0,0,0,.96), 0 0 0 1px rgba(225,29,72,.22); } html[data-theme="dark"] .rpc figcaption{ background:linear-gradient(transparent,rgba(11,11,11,.55) 38%,rgba(11,11,11,.96)); } html[data-theme="dark"] .player__glow{ background:rgba(225,29,72,.22); } html[data-theme="dark"] .player__in{ box-shadow:0 3px 0 #030303, 0 8px 0 #050505, 0 40px 60px -20px rgba(0,0,0,.95); } html[data-theme="dark"] .pbtn span{ border:1px solid rgba(225,29,72,.55); } html[data-theme="dark"] .player__bar{ background:linear-gradient(transparent,rgba(11,11,11,.92)); } html[data-theme="dark"] .bill{ border:1px solid rgba(139,0,0,.6); box-shadow:0 4px 0 #0A0A0A, 0 10px 0 #070707, 0 44px 70px -22px rgba(0,0,0,.95); } /* the palette's second colour, spent on the glow behind the billboard and the two badges. Navy is 1.26:1 on the black, so it can only ever be a fill - what is written on it is white, at 15.59:1 */ html[data-theme="dark"] .bill__glow{ background:rgba(0,31,91,.5); } html[data-theme="dark"] .cred__badge, html[data-theme="dark"] .pl__badge{ background:var(--accent-2); color:#FFFFFF; box-shadow:0 3px 0 #001233; } html[data-theme="dark"] .bill__g{ border-block:1px solid rgba(225,29,72,.28); } html[data-theme="dark"] .cred__art{ box-shadow:0 4px 0 #030303, 0 34px 56px -20px rgba(0,0,0,.95); } html[data-theme="dark"] .cred__body{ box-shadow:0 3px 0 #030303, 0 6px 0 #030303, 0 30px 48px -18px rgba(0,0,0,.9); } html[data-theme="dark"] .mc{ box-shadow:0 3px 0 #030303, 0 22px 36px -14px rgba(0,0,0,.9); } html[data-theme="dark"] .mc__f{ background:rgba(11,11,11,.6); } html[data-theme="dark"] .gi{ box-shadow:0 3px 0 #030303, 0 20px 34px -14px rgba(0,0,0,.9); } html[data-theme="dark"] .gi:hover{ box-shadow:0 3px 0 #030303, 0 26px 44px -14px rgba(0,0,0,.95), 0 0 0 1px rgba(225,29,72,.3) inset; } html[data-theme="dark"] .gi::before{ background:linear-gradient(transparent 45%,rgba(11,11,11,.85)); } html[data-theme="dark"] .gnote::before{ background:radial-gradient(58% 56% at 50% 42%, rgba(225,29,72,.20), rgba(225,29,72,.07) 55%, transparent 74%); } html[data-theme="dark"] .flip__f{ border:1px solid rgba(11,11,11,.14); box-shadow:0 3px 0 #9CA3AF, 0 14px 26px -12px rgba(11,11,11,.35); } html[data-theme="dark"] .flip__f span{ color:rgba(11,11,11,.62); } html[data-theme="dark"] .flip__b{ box-shadow:0 3px 0 #030303, 0 16px 28px -12px rgba(0,0,0,.7); } /* the card is dark here, so it stands on a dark ledge rather than a pale one, and its rule and its heading are drawn in the accent rather than in the near-black they were reading at 3.14:1 */ html[data-theme="dark"] .wbox{ border:1px solid rgba(255,255,255,.14); box-shadow:0 3px 0 #030303, 0 20px 34px -16px rgba(0,0,0,.8); } html[data-theme="dark"] .wbox h3{ color:var(--gold); border-bottom:1px solid rgba(255,255,255,.14); } html[data-theme="dark"] .card3d{ box-shadow:0 4px 0 #030303, 0 10px 0 #050505, 0 44px 66px -22px rgba(0,0,0,.95); } html[data-theme="dark"] .card3d__glow{ background:rgba(225,29,72,.3); } html[data-theme="dark"] .card3d__cube{ box-shadow:0 4px 0 #0A0A0A, 0 12px 22px -8px rgba(0,0,0,.8); } html[data-theme="dark"] .foot__s{ text-shadow:1px 1px 0 rgba(225,29,72,.16), 2px 2px 0 rgba(225,29,72,.11), 3px 3px 0 rgba(225,29,72,.07), 4px 4px 10px rgba(0,0,0,.5); } html[data-theme="dark"] .aura__bloom{ background:radial-gradient(circle closest-side, rgba(225,29,72,.19), rgba(225,29,72,.09) 38%, rgba(11,11,11,.05) 62%, transparent 76%); } html[data-theme="dark"] .lb,.vm{ background:rgba(3,3,3,.97); } html[data-theme="dark"] .fitbg{ box-shadow:inset 0 0 120px 40px rgba(11,11,11,.75); } html[data-theme="dark"] .zoomable:focus-visible{ box-shadow:0 0 0 2px var(--gold), 0 0 0 6px rgba(225,29,72,.22); } html[data-theme="dark"] .zi{ border:1px solid rgba(225,29,72,.55); background: linear-gradient(var(--gold),var(--gold)) center/11px 1.6px no-repeat, linear-gradient(var(--gold),var(--gold)) center/1.6px 11px no-repeat, rgba(11,11,11,.74); } html[data-theme="dark"] .pl__art{ border:1px solid rgba(225,29,72,.34); box-shadow:0 4px 0 #0A0A0A, 0 34px 60px -20px rgba(0,0,0,.95); } html[data-theme="dark"] .fb i{ background:rgba(225,29,72,.15); } html[data-theme="dark"] .fb:hover i{ background:rgba(225,29,72,.24); } html[data-theme="dark"] .gi__e{ background:rgba(11,11,11,.74); border:1px solid rgba(225,29,72,.42); } /* Crimson as given is 4.19:1 on the black - a rule or a border, not type. These are the places the sheet sets the accent in ten-pixel uppercase, and they take it eighteen percent lighter so they can be read. */ html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .sec[data-code]::after, html[data-theme="dark"] .hero[data-code]::after, html[data-theme="dark"] .chip3d i, html[data-theme="dark"] .fb i, html[data-theme="dark"] .gi__e, html[data-theme="dark"] .rpc figcaption i{ color:var(--gold-ink); } /* ========================================================================== LIGHT THEME - EMERALD LUXURY, ON PAPER The bright greens that carried the night cannot carry paper - that is the usual inversion - but this time the one that could not read on black is exactly the one that reads here: emerald 5.08 on the ivory, 4.70 on the mint green 3.49 teal 3.47 gold 2.84 So emerald takes the accent, and for the first time across six palettes it needs no stepped-down twin at all: it clears 4.5:1 on both grounds as given. Green takes the hover and the fills; gold drops back to the glow, where contrast does not apply. There is no white surface named, only an Ivory and a Mint. So a card is the ground itself, and its border and its shadow are what lift it off the page. Ivory #F0F8F5 the ground, and the cards Mint #C8F7EF the bands that sit back Emerald #047857 the accent Green #059669 the hover, and fills Teal #0D9488 held in reserve Gold #C28827 the glow Dark Green #10251D primary type The night theme above is untouched. ========================================================================== */ html[data-theme="light"]{ --accent-rgb: 4,120,87; --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.8L21.5 11l-6.9 2.2L12 20l-2.6-6.8L2.5 11l6.9-2.2z' fill='%23047857'/%3E%3C/svg%3E"); --silver: #4A6157; /* a green-grey, since the palette names none */ /* the hue slots the base sheet still names */ --navy: #4A6157; --purple: #94A89E; --orange: #C28827; /* Gold — the glow on the billboard */ /* no signal colour again, and a green page has no red in it at all, so the rose is picked to read on both grounds: 5.54:1 and 5.13:1, which is enough that the form's errors need no stepped twin */ --red: #B03A3A; --red-ink: #B03A3A; --white: #F0F8F5; /* Ivory — the ground */ --green: #10251D; /* Dark Green — and the role the forest held */ --gold: #047857; /* Emerald — the accent, and the one hue here that clears 4.5:1 on the ivory AND the mint outright, so nothing has to be stepped down for small type */ --gold-lt: #059669; /* Green — the hover, and fills */ --gold-ink: #047857; /* no step needed: the accent already reads */ --gold-dk: #10251D; /* Dark Green */ /* green down into the dark green, deep enough through the middle that the ivory can be written on it - 5.08:1 where the type sits */ --gold-metal: linear-gradient(158deg,#059669 0%,#047857 46%,#10251D 100%); --metal-ink: #F0F8F5; --metal-rim: #10251D; --black: #F0F8F5; /* Ivory — the page ground */ /* the palette names no white surface, so a card is the ground itself and its border and shadow are what lift it off the page */ --card: #F0F8F5; --card-hi: #F0F8F5; --sunk: #C8F7EF; /* Mint — the one step back */ --ink: #10251D; /* Text */ --soft: rgba(16,37,29,.76); --mute: #4A6157; /* Gray */ --hair: rgba(4,120,87,.45); /* the accent drawn as a line */ --hairw:#D4E6DE; /* Border, as the palette names it */ } html[data-theme="light"] .sec--green { background:#F0F8F5; } html[data-theme="light"] .sec--deep { background:linear-gradient(180deg,#F0F8F5 0%,#F0F8F5 100%); } html[data-theme="light"] .sec--red { background:linear-gradient(168deg,#F5FBF8 0%,#F5FBF8 50%,#F5FBF8 100%); } html[data-theme="light"] .sec--forest{ background:linear-gradient(168deg,#F0F8F5 0%,#F0F8F5 50%,#F0F8F5 100%); } html[data-theme="light"] .sec--navy { background:linear-gradient(168deg,#F0F8F5 0%,#C8F7EF 52%,#F0F8F5 100%); } html[data-theme="light"] .hero__giant{ --g1:rgba(16,37,29,.34); --g2:rgba(16,37,29,.20); --g3:rgba(4,120,87,.40); --g4:rgba(16,37,29,.15); background-blend-mode:soft-light; } html[data-theme="light"] .hero { background: radial-gradient(ellipse 60% 54% at 50% 42%, rgba(4,120,87,.10), transparent 72%), radial-gradient(ellipse at 22% 34%,#F0F8F5 0%,#F0F8F5 46%,#F0F8F5 100%); } html[data-theme="light"] .intro{ background:radial-gradient(ellipse at 50% 40%,#F0F8F5,#F0F8F5 70%); } html[data-theme="light"] .foot { background:linear-gradient(180deg,#F0F8F5,#D4E6DE); } html[data-theme="light"] .hdr.stuck{ background:rgba(240,248,245,.92); box-shadow:0 10px 30px -14px rgba(16,37,29,.22); } html[data-theme="light"] .h3d{ color:var(--ink); text-shadow: 1px 1px 0 #059669, 2px 2px 0 #066A4C, 3px 3px 0 #047857, 4px 4px 0 #047857, 5px 5px 0 #B03A3A, 6px 6px 12px rgba(16,37,29,.28), 0 0 30px rgba(5,150,105,.28); } html[data-theme="light"] .btn--gold:hover{ box-shadow:0 6px 0 #047857, 0 20px 32px -10px rgba(5,150,105,.55); } html[data-theme="light"] .btn--navy{ background:linear-gradient(158deg,#059669,#047857); border-color:#047857; } html[data-theme="light"] .btn--navy:hover{ box-shadow:0 6px 0 #1B3529, 0 20px 32px -10px rgba(4,120,87,.45); } html[data-theme="light"] .btn--red{ background:linear-gradient(158deg,#059669,#B03A3A); border-color:#B03A3A; } html[data-theme="light"] .btn--red:hover{ box-shadow:0 6px 0 #8F3232, 0 20px 32px -10px rgba(176,58,58,.5); } html[data-theme="light"] .btn--dark{ background:linear-gradient(158deg,#059669,#047857); border-color:#047857; color:#F0F8F5; } html[data-theme="light"] .btn--ghost{ background:rgba(4,120,87,.05); } html[data-theme="light"] .chip3d{ box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 3px 0 #D4E6DE, 0 10px 18px -8px rgba(16,37,29,.22); } html[data-theme="light"] .chip3d:hover{ box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 7px 0 #D4E6DE, 0 20px 28px -10px rgba(16,37,29,.28); } html[data-theme="light"] .chip3d--red { background:linear-gradient(158deg,#F5FBF8,#F5FBF8); border-color:rgba(176,58,58,.42); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 3px 0 #F5FBF8, 0 10px 18px -8px rgba(16,37,29,.2); } html[data-theme="light"] .chip3d--red:hover{ background:linear-gradient(158deg,#C8F7EF,#F5FBF8); } html[data-theme="light"] .chip3d--green{ background:linear-gradient(158deg,#F0F8F5,#F0F8F5); border-color:rgba(4,120,87,.2); } html[data-theme="light"] .chip3d--navy { background:linear-gradient(158deg,#F0F8F5,#F0F8F5); border-color:rgba(4,120,87,.38); } html[data-theme="light"] .chip3d--dark { background:linear-gradient(158deg,#059669,#047857); border-color:#047857; color:#F0F8F5; box-shadow:0 3px 0 rgba(16,37,29,.35), 0 10px 18px -8px rgba(16,37,29,.35); } html[data-theme="light"] .chip3d--dark i{ color:var(--gold-lt); } html[data-theme="light"] .chip3d--dark span, html[data-theme="light"] .chip3d--dark b i{ color:rgba(240,248,245,.72); } html[data-theme="light"] .fb, html[data-theme="light"] .snd, html[data-theme="light"] .thm{ background:rgba(4,120,87,.04); box-shadow:0 2px 0 rgba(16,37,29,.12); } html[data-theme="light"] .stack__glow{ background:rgba(5,150,105,.4); } html[data-theme="light"] .stack__back{ background:linear-gradient(158deg,rgba(148,168,158,.16),rgba(4,120,87,.16)); } html[data-theme="light"] .stack__mid{ background:linear-gradient(158deg,rgba(4,120,87,.14),rgba(5,150,105,.18)); } html[data-theme="light"] .stack__face{ box-shadow:0 40px 70px -24px rgba(16,37,29,.4); } html[data-theme="light"] .cf__i.mid{ box-shadow:0 40px 70px -22px rgba(16,37,29,.35), 0 0 60px rgba(5,150,105,.35); } html[data-theme="light"] .gnote p{ color:var(--ink); } html[data-theme="light"] .gnote::before{ background:radial-gradient(58% 56% at 50% 42%, rgba(5,150,105,.34), rgba(148,168,158,.10) 55%, transparent 74%); } html[data-theme="light"] .flip__f{ background:linear-gradient(158deg,#F0F8F5,#F0F8F5); border-color:rgba(4,120,87,.14); box-shadow:0 3px 0 #D4E6DE, 0 14px 26px -12px rgba(16,37,29,.3); } html[data-theme="light"] .flip__b{ background:linear-gradient(158deg,#F0F8F5,#F0F8F5); border-color:var(--gold); } html[data-theme="light"] .flip__b b{ color:var(--ink); } html[data-theme="light"] .f input, html[data-theme="light"] .f select, html[data-theme="light"] .f textarea{ box-shadow:0 2px 5px rgba(16,37,29,.07) inset; } html[data-theme="light"] .f label i, html[data-theme="light"] .f .e, html[data-theme="light"] .fnote.no{ color:var(--red-ink); } html[data-theme="light"] .f.bad input, html[data-theme="light"] .f.bad select, html[data-theme="light"] .f.bad textarea{ border-color:var(--red); } html[data-theme="light"] .f input[type="date"]::-webkit-calendar-picker-indicator{ filter:none; } html[data-theme="light"] .lb, html[data-theme="light"] .vm{ background:rgba(240,248,245,.97); } html[data-theme="light"] .lb__s img{ box-shadow:0 40px 80px -24px rgba(16,37,29,.45); } html[data-theme="light"] .fitbg{ filter:blur(26px) saturate(1.15) brightness(1.02); box-shadow:inset 0 0 120px 40px rgba(240,248,245,.72); } html[data-theme="light"] .slab, html[data-theme="light"] .pc, html[data-theme="light"] .rcard, html[data-theme="light"] .rpc, html[data-theme="light"] .mc, html[data-theme="light"] .gi, html[data-theme="light"] .bill, html[data-theme="light"] .card3d, html[data-theme="light"] .wbox, html[data-theme="light"] .cred__art, html[data-theme="light"] .cred__body, html[data-theme="light"] .player__in, html[data-theme="light"] .logo__cube, html[data-theme="light"] .cf__i{ box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 3px 0 #D4E6DE, 0 22px 34px -18px rgba(16,37,29,.28); } html[data-theme="light"] .rpc:hover, html[data-theme="light"] .rpc:focus-visible{ box-shadow:0 3px 0 #D4E6DE, 0 40px 66px -18px rgba(16,37,29,.42), 0 0 0 1px rgba(5,150,105,.55); } html[data-theme="light"] .gi:hover{ box-shadow:0 3px 0 #D4E6DE, 0 26px 44px -16px rgba(16,37,29,.34), 0 0 0 1px rgba(5,150,105,.5) inset; } html[data-theme="light"] .card3d{ background:linear-gradient(158deg,#F0F8F5,#F0F8F5); border-color:var(--gold); box-shadow:0 4px 0 #D4E6DE, 0 10px 0 #D4E6DE, 0 44px 66px -24px rgba(16,37,29,.32); } html[data-theme="light"] .card3d__glow{ background:rgba(5,150,105,.34); } html[data-theme="light"] .card3d__cube{ background:linear-gradient(158deg,#059669,#047857); border-color:#047857; box-shadow:0 4px 0 #1B3529, 0 12px 22px -8px rgba(16,37,29,.35); } html[data-theme="light"] .bill{ background:linear-gradient(158deg,#F5FBF8,#F5FBF8); border-color:rgba(176,58,58,.42); box-shadow:0 4px 0 #F5FBF8, 0 10px 0 #C8F7EF, 0 44px 70px -24px rgba(16,37,29,.3); } html[data-theme="light"] .bill__glow{ background:rgba(5,150,105,.34); } html[data-theme="light"] .socs a{ background:rgba(4,120,87,.05); box-shadow:0 2px 0 rgba(16,37,29,.12); } html[data-theme="light"] .cred__body{ background:linear-gradient(158deg,#F0F8F5,#F0F8F5); border-color:rgba(4,120,87,.24); box-shadow:0 3px 0 #D4E6DE, 0 6px 0 #F0F8F5, 0 30px 48px -20px rgba(16,37,29,.3); } html[data-theme="light"] .cred__art{ box-shadow:0 4px 0 #D4E6DE, 0 34px 56px -22px rgba(16,37,29,.34); } html[data-theme="light"] .aura__bloom{ display:none; } html[data-theme="light"] .aura{ transition:none; } html[data-theme="light"] .aura__t{ background:var(--navy); } html[data-theme="light"] body{ font-weight:400; } html[data-theme="light"] .lede{ color:#2E453A; } html[data-theme="light"] .kv dd, html[data-theme="light"] .card3d__l li, html[data-theme="light"] .bill__g b, html[data-theme="light"] .mc__b h3{ color:#1B3529; } html[data-theme="light"] .kv dt, html[data-theme="light"] .mini, html[data-theme="light"] .note, html[data-theme="light"] .none, html[data-theme="light"] .chip3d span, html[data-theme="light"] .card3d__c, html[data-theme="light"] .bill__g span{ color:#4A6157; } html[data-theme="light"] .eyebrow{ color:var(--gold-ink); } html[data-theme="light"] .eyebrow i{ background:var(--gold-lt); } html[data-theme="light"] .sec[data-code]::after{ color:var(--gold-ink); opacity:.8; } html[data-theme="light"] .chip3d b{ color:#10251D; } html[data-theme="light"] .chip3d i{ color:var(--gold-ink); } html[data-theme="light"] .chip3d--dark b{ color:#F0F8F5; } html[data-theme="light"] .h3d{ color:#10251D; text-shadow: 1px 1px 0 #059669, 2px 2px 0 #066A4C, 3px 3px 0 #047857, 4px 4px 10px rgba(16,37,29,.16); } html[data-theme="light"] .pc img, html[data-theme="light"] .rpc img, html[data-theme="light"] .gi img, html[data-theme="light"] .cf__i img, html[data-theme="light"] .stack__face img, html[data-theme="light"] .cred__art img{ filter:saturate(1.03) contrast(1.02); } html[data-theme="light"] .gi:hover img{ filter:saturate(1.1) contrast(1.04); } html[data-theme="light"] .mc__img img{ filter:saturate(1.02); } html[data-theme="light"] .mc:hover .mc__img img{ filter:saturate(1.05) brightness(1.03); } html[data-theme="light"] .player__in img{ filter:brightness(.96) saturate(1.02); } html[data-theme="light"] .player:hover .player__in img{ filter:brightness(1.02); } html[data-theme="light"] .fitbg{ filter:blur(30px) saturate(1.1) brightness(1.14); box-shadow:inset 0 0 120px 44px rgba(240,248,245,.6); } html[data-theme="light"] .pc:hover .fitbg, html[data-theme="light"] .gi:hover .fitbg, html[data-theme="light"] .mc:hover .fitbg, html[data-theme="light"] .cf__i.mid .fitbg, html[data-theme="light"] .player:hover .fitbg{ filter:blur(34px) saturate(1.25) brightness(1.08); } html[data-theme="light"] .gi::before{ background:linear-gradient(transparent 58%,rgba(16,37,29,.78)); opacity:.3; } html[data-theme="light"] .gi::after{ color:#059669; text-shadow:0 1px 3px rgba(16,37,29,.9); } html[data-theme="light"] .cf__i::after{ background:linear-gradient(180deg,transparent 45%,rgba(16,37,29,.55)); } html[data-theme="light"] .sec--deep { background:#F0F8F5; } html[data-theme="light"] .sec--green { background:linear-gradient(180deg,#F0F8F5,#F0F8F5); } html[data-theme="light"] .sec--forest{ background:linear-gradient(168deg,#F0F8F5 0%,#F0F8F5 50%,#F0F8F5 100%); } html[data-theme="light"] .foot{ background:linear-gradient(180deg,#F0F8F5,#D4E6DE); } html[data-theme="light"] .zi{ border-color:rgba(4,120,87,.5); background: linear-gradient(var(--gold),var(--gold)) center/11px 1.6px no-repeat, linear-gradient(var(--gold),var(--gold)) center/1.6px 11px no-repeat, rgba(240,248,245,.9); box-shadow:0 2px 8px -2px rgba(16,37,29,.3); } html[data-theme="light"] .rpc > .zi{ background-size:8px 1.4px, 1.4px 8px, auto; } html[data-theme="light"] .pl__art{ border-color:rgba(4,120,87,.4); box-shadow:0 4px 0 #D4E6DE, 0 34px 56px -22px rgba(16,37,29,.34); } html[data-theme="light"] .fb i{ background:rgba(4,120,87,.16); color:var(--gold-ink); } html[data-theme="light"] .fb.on i{ background:rgba(16,37,29,.2); color:#10251D; } html[data-theme="light"] .gi__e{ color:var(--gold-ink); background:rgba(240,248,245,.9); border-color:rgba(4,120,87,.45); box-shadow:0 2px 10px -4px rgba(16,37,29,.34); } /* ---- the primary button, as the palette sheet draws it ------------- The reference shows one button, a royal-blue-to-purple sweep. The gold-metal gradient stays golden yellow, since that is a primary colour in its own right and it carries the badges and the lit filter as well as the buttons; the sweep goes to the secondary button, which is the one that sits beside it in the hero. */ html[data-theme="light"] .btn--navy{ background:linear-gradient(103deg,#1B3529 0%,#10251D 100%); border-color:rgba(16,37,29,.5); color:#F0F8F5; box-shadow:0 3px 0 #10251D, 0 14px 26px -12px rgba(16,37,29,.4); } html[data-theme="light"] .btn--navy:hover{ background:linear-gradient(103deg,#10251D 0%,#1B3529 100%); box-shadow:0 4px 0 #10251D, 0 18px 30px -12px rgba(16,37,29,.45); } /* ---- the pieces added since the cream sheet was written ---- */ html[data-theme="light"] .gi__e{ background:rgba(240,248,245,.92); border-color:rgba(4,120,87,.42); color:var(--gold-ink); box-shadow:0 2px 10px -3px rgba(16,37,29,.28); } html[data-theme="light"] .zi{ background:linear-gradient(#047857,#047857) center/11px 1.6px no-repeat, linear-gradient(#047857,#047857) center/1.6px 11px no-repeat, rgba(240,248,245,.94); border-color:rgba(4,120,87,.45); box-shadow:0 2px 8px -2px rgba(16,37,29,.3); } html[data-theme="light"] .rpc > .zi{ background-size:8px 1.4px, 1.4px 8px, auto; } html[data-theme="light"] .fb i{ background:rgba(5,150,105,.22); color:var(--gold-ink); } html[data-theme="light"] .fb.on i{ background:rgba(16,37,29,.16); color:#10251D; } html[data-theme="light"] .pl__art{ border-color:rgba(4,120,87,.32); box-shadow:0 4px 0 #D4E6DE, 0 34px 56px -22px rgba(16,37,29,.34); } /* ---- what the sheet still paints dark on a white ground. The scrims are deliberately left out: a gradient that sits ON a photograph so the caption over it can be read stays dark in either theme. ---- */ html[data-theme="light"] .raise{ box-shadow: 0 1px 0 rgba(240,248,245,.09) inset, 0 -1px 0 rgba(0,0,0,.5) inset, 0 2px 0 #D4E6DE, 0 4px 0 #D4E6DE, 0 8px 0 #D4E6DE, 0 26px 40px -14px rgba(0,0,0,.85); } html[data-theme="light"] .h3d--dark{ text-shadow: 1px 1px 0 #059669, 2px 2px 0 #066A4C, 3px 3px 0 #047857, 4px 4px 0 #B03A3A, 5px 5px 0 #B03A3A, 6px 6px 10px rgba(16,37,29,.3); } html[data-theme="light"] .sec--white .lede{ color:rgba(16,37,29,.7); } html[data-theme="light"] .rnd{ box-shadow:0 3px 0 #D4E6DE, 0 10px 18px -8px rgba(0,0,0,.8); } html[data-theme="light"] .cube__f{ background:linear-gradient(158deg,rgba(148,168,158,.9),rgba(16,37,29,.92)); } html[data-theme="light"] .cube__f--bt{ background:linear-gradient(158deg,#F0F8F5,#F0F8F5); } html[data-theme="light"] .logo__cube{ box-shadow:0 3px 0 #D4E6DE, 0 8px 16px -6px rgba(0,0,0,.8); } html[data-theme="light"] .orb--b{ background:rgba(4,120,87,.55); } html[data-theme="light"] .slab{ box-shadow:0 1px 0 rgba(240,248,245,.09) inset, 0 3px 0 #D4E6DE, 0 6px 0 #D4E6DE, 0 28px 44px -16px rgba(0,0,0,.9); } html[data-theme="light"] .kv--dark > div{ border-bottom-color:rgba(16,37,29,.12); } html[data-theme="light"] .kv--dark dt{ color:rgba(16,37,29,.5); } html[data-theme="light"] .pc{ box-shadow:0 3px 0 #D4E6DE, 0 22px 34px -14px rgba(0,0,0,.9); } html[data-theme="light"] .rcard{ box-shadow:0 1px 0 rgba(240,248,245,.09) inset, 0 3px 0 #D4E6DE, 0 6px 0 #D4E6DE, 0 22px 34px -16px rgba(0,0,0,.9); } html[data-theme="light"] .rpc{ box-shadow:0 2px 0 #D4E6DE, 0 10px 16px -10px rgba(0,0,0,.85); } html[data-theme="light"] .rpc:focus-visible{ box-shadow:0 3px 0 #D4E6DE, 0 40px 66px -16px rgba(0,0,0,.96), 0 0 0 1px rgba(4,120,87,.22); } /* the caption still lies on a dark scrim over the photograph, so it keeps light ink in this theme rather than taking the page's dark body colour */ html[data-theme="light"] .rpc figcaption b{ color:#F0F8F5; } /* the accent itself is only 4.23:1 even on paper, and this line does not lie on paper - it lies on a dark scrim over the photograph. So it takes the accent lifted, the way the dark theme's caption takes the cyan. */ html[data-theme="light"] .rpc figcaption i{ color:#6EE7B7; } /* a white edge disappears on a pale chip, so the flag is outlined in ink here */ html[data-theme="light"] .rem{ border-color:rgba(16,37,29,.3); } html[data-theme="light"] .player__in{ box-shadow:0 3px 0 #D4E6DE, 0 8px 0 #D4E6DE, 0 40px 60px -20px rgba(0,0,0,.95); } html[data-theme="light"] .mc{ box-shadow:0 3px 0 #D4E6DE, 0 22px 36px -14px rgba(0,0,0,.9); } html[data-theme="light"] .gi{ box-shadow:0 3px 0 #D4E6DE, 0 20px 34px -14px rgba(0,0,0,.9); } html[data-theme="light"] .flip__f span{ color:rgba(16,37,29,.62); } html[data-theme="light"] .wbox{ border:1px solid rgba(16,37,29,.12); box-shadow:0 3px 0 #D4E6DE, 0 20px 34px -16px rgba(16,37,29,.3); } html[data-theme="light"] .wbox h3{ border-bottom:1px solid rgba(16,37,29,.12); } /* The two surfaces the recovered sheet repainted but left standing on a dark drop shadow: on white the shadow has to lift rather than sink. */ html[data-theme="light"] .btn--dark{ box-shadow:0 3px 0 #D4E6DE, 0 12px 24px -8px rgba(16,37,29,.28); } html[data-theme="light"] .flip__b{ box-shadow:0 3px 0 #D4E6DE, 0 16px 28px -12px rgba(16,37,29,.26); }