/* ============================================================ ATELIER — SHINE LAYER atelier-shine.css v1 This EXTENDS styles.min.css. It does not replace it and it does not redefine any of its classes outright — every rule here is scoped under `.shine`, so nothing changes anywhere until you add that class to a page's . INSTALL (per page, one page at a time) 1. Upload to public_html/atelier-shine.css 2. In , AFTER the existing stylesheet line: 3. On , add `shine` alongside `page-dark`: 4. Add these two as the first elements inside : REMOVE Drop `shine` from the body class. The page reverts to your existing page-dark styling exactly as it is today. Bump ?v= on every change. NOT for proposals/proposal.css. Clients print those. ============================================================ */ /* ---------- 1. EXTRA TOKENS ---------- Added, not replaced. Your --ink, --ember, --paper-50 etc. keep their current values so nothing outside .shine is disturbed. */ .shine{ --deep:#0A0908; /* deeper than --ink #111, so glow has somewhere to fall off to */ --deep-2:#12100E; --ember-lit:#FF6B2C; /* brighter sibling of --ember for glows only */ --ember-hi:#FF9A5A; --cool-lit:#5B8DEF; --hair-lit:rgba(255,255,255,.15); --sheen:rgba(255,255,255,.50); } /* ---------- 2. CANVAS ---------- --ink is #111111, which is too light to bloom against. Inside .shine only, drop the page to near-black. */ .page-dark.shine{ background-color:#0C0A09; /* percentage positions spread these across the WHOLE scroll height, so the light does not stop at the bottom of the first screen */ background-image: radial-gradient(ellipse 1300px 800px at 12% 1%, rgba(255,107,44,.34), transparent 62%), radial-gradient(ellipse 1100px 700px at 92% 13%, rgba(91,141,239,.13), transparent 64%), radial-gradient(ellipse 1200px 750px at 5% 22%, rgba(255,107,44,.20), transparent 62%), radial-gradient(ellipse 1000px 700px at 95% 33%, rgba(192,57,43,.20), transparent 62%), radial-gradient(ellipse 1300px 800px at 20% 46%, rgba(255,107,44,.22), transparent 62%), radial-gradient(ellipse 1100px 700px at 92% 58%, rgba(91,141,239,.18), transparent 62%), radial-gradient(ellipse 1200px 780px at 8% 70%, rgba(255,107,44,.20), transparent 62%), radial-gradient(ellipse 1100px 700px at 90% 82%, rgba(192,57,43,.18), transparent 62%), radial-gradient(ellipse 1300px 800px at 30% 94%, rgba(255,107,44,.24), transparent 62%); background-repeat:no-repeat; } /* ---------- 3. AMBIENT LIGHT ---------- Markup:
Fixed, so the light stays put while the page scrolls. */ .shine .aurora{ position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; /* promote to its own layer so it never participates in hit testing */ will-change:transform;transform:translateZ(0); } .shine .aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px)} .shine .aurora i:nth-child(1){width:1100px;height:900px;left:-180px;top:-380px; background:radial-gradient(circle,rgba(255,107,44,.30),transparent 66%)} .shine .aurora i:nth-child(2){width:1000px;height:900px;right:-300px;top:180px; background:radial-gradient(circle,rgba(91,141,239,.20),transparent 68%)} .shine .aurora i:nth-child(3){width:1200px;height:800px;left:20%;top:1500px; background:radial-gradient(circle,rgba(255,107,44,.18),transparent 66%)} .shine .aurora i:nth-child(4){width:900px;height:700px;right:-200px;top:2600px; background:radial-gradient(circle,rgba(192,57,43,.18),transparent 66%)} .shine .grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;transform:translateZ(0); background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px); background-size:3px 3px} /* everything else sits above the light */ .shine .site-head{z-index:50} .shine main,.shine .site-foot{position:relative;z-index:2} /* per-page mood — add alongside .shine */ .shine.lit-cool .aurora i:nth-child(1){background:radial-gradient(circle,rgba(91,141,239,.28),transparent 65%)} .shine.lit-cool .aurora i:nth-child(3){background:radial-gradient(circle,rgba(91,141,239,.16),transparent 66%)} .shine.lit-warm .aurora i:nth-child(2){background:radial-gradient(circle,rgba(255,107,44,.20),transparent 66%)} .shine.lit-calm .aurora i:nth-child(1), .shine.lit-calm .aurora i:nth-child(3){opacity:.55} /* ---------- 4. HEADER ---------- NOTE: styles.min.css declares `.page-dark .site-head` twice. The second one wins and paints the header solid orange. If that is a leftover, delete the second declaration in styles.min.css. Until then this restores the glass version inside .shine only. */ .page-dark.shine .site-head{ background:rgba(10,9,8,.72);backdrop-filter:saturate(1.3) blur(14px); border-bottom:1px solid rgba(255,255,255,.10); } .page-dark.shine .site-head.scrolled{ background:rgba(10,9,8,.92); box-shadow:0 14px 40px -22px rgba(0,0,0,.9); } .page-dark.shine .site-head::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); } /* ---------- 5. TYPE ---------- */ .page-dark.shine .eyebrow{color:var(--ember-hi)} .page-dark.shine .eyebrow::after{ content:'';height:1px;flex:1;max-width:200px; background:linear-gradient(90deg,rgba(255,107,44,.55),transparent); } .shine h1,.shine .h1{letter-spacing:-.035em} /* the animated gradient phrase — wrap a word or two: … */ .shine .shine-txt{ background:linear-gradient(100deg,var(--ember-lit) 0%,var(--ember-hi) 38%,#FFD9C2 55%,var(--ember-hi) 70%,var(--ember-lit) 100%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text; color:transparent;animation:shine-shift 7s ease-in-out infinite; } @keyframes shine-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* ---------- 6. .path — your two-up pathway cards ---------- */ .page-dark.shine .paths{background:transparent;border:none;gap:18px} .page-dark.shine .path{ position:relative;overflow:hidden;border-radius:6px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.08); transition:transform .22s ease,border-color .22s ease; } .page-dark.shine .path::before{ content:'';position:absolute;inset:0 0 auto 0;height:1px;z-index:3; background:linear-gradient(90deg,transparent,var(--sheen),transparent); } .page-dark.shine .path::after{ content:'';position:absolute;left:50%;top:-70px;transform:translateX(-50%); width:280px;height:150px;border-radius:50%;filter:blur(40px);opacity:0;transition:.25s; background:radial-gradient(circle,rgba(255,107,44,.75),transparent 68%); } .page-dark.shine .path:hover{transform:translateY(-3px);border-color:rgba(255,107,44,.4)} .page-dark.shine .path:hover::after{opacity:1} .page-dark.shine .path>*{position:relative;z-index:2} .page-dark.shine .path .k{color:var(--ember-lit)} /* ---------- 7. .workcard — work / case study cards ---------- */ .page-dark.shine .workcard{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.012)); border-color:rgba(255,255,255,.08);border-radius:6px;position:relative; } .page-dark.shine .workcard::before{ content:'';position:absolute;inset:0 0 auto 0;height:1px;z-index:3; background:linear-gradient(90deg,transparent,var(--sheen),transparent); } .page-dark.shine .workcard:hover{ border-color:rgba(255,107,44,.42);transform:translateY(-3px); box-shadow:0 30px 70px -28px rgba(0,0,0,.9),0 0 60px -26px rgba(255,107,44,.55); } .page-dark.shine .wc-media img{opacity:.85;transition:opacity .25s,transform .25s} .page-dark.shine .workcard:hover .wc-media img{opacity:1;transform:scale(1.03)} .page-dark.shine .wc-cat{color:var(--ember-hi)} .page-dark.shine .wc-title{color:var(--paper)} .page-dark.shine .wc-body,.page-dark.shine .wc-deliv{color:var(--paper-70)} /* ---------- 8. .stat — your existing stat band ---------- */ .page-dark.shine .stat{ background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08);border-radius:5px;position:relative;overflow:hidden; } .page-dark.shine .stat::before{ content:'';position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,var(--sheen),transparent); } .page-dark.shine .st-n{ background:linear-gradient(180deg,#fff,rgba(255,154,90,.9)); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 40px rgba(255,107,44,.35); } .page-dark.shine .st-l{color:var(--paper-50)} /* ---------- 9. BUTTONS ---------- */ .page-dark.shine .btn--solid{ position:relative;overflow:hidden;border:none;color:#fff; background:linear-gradient(135deg,var(--ember-lit),var(--atelier-orange-dark)); box-shadow:0 0 0 1px rgba(255,107,44,.5),0 16px 46px -12px rgba(255,107,44,.8); } .page-dark.shine .btn--solid::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.5) 50%,transparent 68%); transform:translateX(-120%);animation:shine-sweep 5s ease-in-out infinite; } .page-dark.shine .btn--solid>*{position:relative;z-index:2} @keyframes shine-sweep{0%,62%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}} .page-dark.shine .btn--ghost{ border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:var(--paper); } .page-dark.shine .btn--ghost:hover{ border-color:rgba(255,107,44,.65);background:rgba(255,107,44,.08);color:var(--paper); } /* ---------- 10. THE SWITCHER (.mv on run-the-show + homepage) ---------- Frames your existing multiview as a lit glass panel. Wrap it:
... your existing .mv markup ...
*/ .shine .shine-panel{position:relative;z-index:3;padding:2px;border-radius:8px; background:linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,.05) 35%,rgba(255,255,255,.02) 60%,rgba(255,107,44,.28)); box-shadow:0 50px 120px -36px rgba(0,0,0,.95),0 0 90px -30px rgba(255,107,44,.5)} .shine .shine-panel>.mv, .shine .shine-panel>.shine-panel-in{ background:rgba(10,9,8,.90);border-radius:7px;padding:22px} .shine .shine-panel-glow{position:absolute;left:50%;top:20px;transform:translateX(-50%); width:1080px;max-width:120%;height:480px;border-radius:50%;filter:blur(64px);z-index:-1; background:radial-gradient(ellipse at center,rgba(255,107,44,.62),rgba(255,107,44,.20) 42%,transparent 72%)} /* program tile reads hot */ .page-dark.shine .mv-pgm{ box-shadow:0 0 0 1px rgba(216,38,43,.55),0 0 46px -12px rgba(216,38,43,.9)} .page-dark.shine .mv-tile.pgm{ box-shadow:0 0 0 1px rgba(216,38,43,.5),0 0 30px -10px rgba(216,38,43,.85)} .page-dark.shine .mv-tile.pvw{box-shadow:0 0 0 1px rgba(55,191,122,.45)} /* switcher bus buttons */ .page-dark.shine .sw-btn{ background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12); color:var(--paper-50);border-radius:3px;transition:.14s} .page-dark.shine .sw-btn:hover{background:rgba(255,255,255,.10);color:var(--paper)} .page-dark.shine .sw-btn.is-pgm{ background:linear-gradient(180deg,#E0442F,#A32B1F);border-color:#E0442F;color:#fff; box-shadow:0 0 30px -6px rgba(224,68,47,.95),inset 0 1px 0 rgba(255,255,255,.35)} .page-dark.shine .sw-btn.is-pvw{ border-color:rgba(55,191,122,.7);color:#8FE3B4;background:rgba(55,191,122,.10)} .page-dark.shine .sw-cut,.page-dark.shine .sw-diss, .page-dark.shine .sw-gfx,.page-dark.shine .sw-auto{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14); color:var(--paper);border-radius:3px} .page-dark.shine .sw-gfx.is-on,.page-dark.shine .sw-auto.is-on{ border-color:rgba(255,107,44,.7);color:var(--ember-hi); box-shadow:0 0 22px -8px rgba(255,107,44,.9)} .page-dark.shine .sw-gfx.is-on .dot,.page-dark.shine .sw-auto.is-on .dot{ background:var(--ember-lit);box-shadow:0 0 10px var(--ember-lit)} /* ---------- 11. RUN-THE-SHOW GAME CHROME ---------- */ .page-dark.shine .rts-bar{ background:rgba(10,9,8,.90);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.10);border-radius:5px} .page-dark.shine .rts-v{color:var(--paper)} .page-dark.shine .rts-k{color:var(--paper-50)} .page-dark.shine .rts-cue.live{ color:var(--ember-hi);text-shadow:0 0 24px rgba(255,107,44,.55)} .page-dark.shine .rts-cue.hit{color:#8FE3B4;text-shadow:0 0 24px rgba(55,191,122,.5)} .page-dark.shine .rts-cue.miss{color:#FF9A8A;text-shadow:0 0 24px rgba(216,38,43,.5)} .page-dark.shine .rts-card{ background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14);border-radius:8px;position:relative;overflow:hidden; box-shadow:0 50px 120px -36px rgba(0,0,0,.95)} .page-dark.shine .rts-card::before{ content:'';position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,var(--sheen),transparent)} .page-dark.shine .rts-badge{ color:var(--ember-hi);letter-spacing:.22em; text-shadow:0 0 20px rgba(255,107,44,.5)} .page-dark.shine .rts-overlay{ background:rgba(10,9,8,.92); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } /* ---------- 12. LOGO WALL ---------- brightness(0) invert(1) knocks any dark logo to pure white, so no separate white assets are needed. */ .page-dark.shine .logo img, .page-dark.shine .logowall img, .page-dark.shine .clients img{ filter:brightness(0) invert(1);opacity:.55;transition:.18s} .page-dark.shine .logo img:hover, .page-dark.shine .logowall img:hover, .page-dark.shine .clients img:hover{ opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 14px rgba(255,255,255,.6))} /* ---------- 13. SECTION DIVIDER ----------
between bands. */ .shine .shine-div{height:1px;position:relative; background:linear-gradient(90deg,transparent,rgba(255,107,44,.7),transparent)} .shine .shine-div::after{content:'';position:absolute;left:0;right:0;top:0;height:60px; background:linear-gradient(180deg,rgba(255,107,44,.10),transparent)} /* ---------- 14. FORMS ---------- */ .page-dark.shine input[type=text],.page-dark.shine input[type=email], .page-dark.shine input[type=tel],.page-dark.shine input[type=date], .page-dark.shine textarea,.page-dark.shine select{ background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.15); color:var(--paper);border-radius:3px} .page-dark.shine input:focus,.page-dark.shine textarea:focus,.page-dark.shine select:focus{ border-color:rgba(255,107,44,.7);outline:none; box-shadow:0 0 0 3px rgba(255,107,44,.14)} .page-dark.shine ::placeholder{color:rgba(255,255,255,.28)} .page-dark.shine option{background:var(--deep-2);color:var(--paper)} /* ---------- 15. FOOTER ---------- */ .page-dark.shine .site-foot{ border-top:1px solid rgba(255,255,255,.09);background:transparent} .page-dark.shine .foot-col h3{color:var(--paper-50)} .page-dark.shine .foot-col a:hover,.page-dark.shine .foot-contact a:hover{color:var(--ember-hi)} /* ---------- 16. MOTION RESPECT ---------- */ @media (prefers-reduced-motion:reduce){ .shine .shine-txt,.page-dark.shine .btn--solid::after{animation:none} .shine .shine-txt{color:var(--ember-lit);-webkit-text-fill-color:var(--ember-lit)} } /* ---------- 17. PRINT ---------- Never hand anyone a black page out of a printer. */ @media print{ .shine .aurora,.shine .grain,.shine .shine-panel-glow{display:none!important} .page-dark.shine{background:#fff!important;color:#111!important} .page-dark.shine h1,.page-dark.shine h2,.page-dark.shine h3{color:#111!important} .shine .shine-txt{color:#B94718!important;-webkit-text-fill-color:#B94718!important} } /* ---------- 18. MOBILE ---------- */ @media(max-width:760px){ .shine .aurora i{filter:blur(70px);opacity:.85} .shine .shine-panel{padding:1px;border-radius:6px} .shine .shine-panel>.mv,.shine .shine-panel>.shine-panel-in{padding:14px} .shine .shine-panel-glow{height:300px} } /* ============================================================ 19. LIGHT-THEME COMPONENTS styles.min.css paints these for the white site. page-dark does not reach them, so they stay light and their text disappears. Everything here is still scoped to .shine. ============================================================ */ /* --- full-width light bands --- */ .page-dark.shine #services{ background:transparent; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); } .page-dark.shine .clients{ background:rgba(255,255,255,.03); border-top-color:rgba(255,255,255,.08); border-bottom-color:rgba(255,255,255,.08); } /* --- .pathway: the three service cards --- His design gives them a deliberate rhythm: card 1 orange, card 2 ink, card 3 paper. Only card 3 needs converting. Cards 1 and 2 already read on dark and their nth-of-type text colours outrank anything here anyway, so leave them alone and only add the lit edge. */ .page-dark.shine .pathway{ border-color:rgba(255,255,255,.10);border-radius:6px; position:relative;overflow:hidden; } .page-dark.shine .pathway::before{ content:'';position:absolute;inset:0 0 auto 0;height:1px;z-index:3; background:linear-gradient(90deg,transparent,var(--sheen),transparent); } .page-dark.shine .pathway>*{position:relative;z-index:2} /* card 3 onward: the ones that were paper */ .page-dark.shine .pathways .pathway:nth-of-type(n+3){ background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012)); } .page-dark.shine .pathways .pathway:nth-of-type(n+3) h3, .page-dark.shine .pathways .pathway:nth-of-type(n+3) .h3{color:var(--paper)} .page-dark.shine .pathways .pathway:nth-of-type(n+3) .pw-body, .page-dark.shine .pathways .pathway:nth-of-type(n+3) .svc-list li{color:var(--paper-70)} .page-dark.shine .pathways .pathway:nth-of-type(n+3) .pw-label{color:var(--ember-hi)} .page-dark.shine .pathways .pathway:nth-of-type(n+3) .svc-list li::before{background:var(--ember-lit)} .page-dark.shine .pathways .pathway:nth-of-type(n+3) .pw-cta{color:var(--ember-hi)} /* hover glow on every card, whatever its fill */ .page-dark.shine .pathway::after{ content:'';position:absolute;left:50%;top:-70px;transform:translateX(-50%); width:280px;height:150px;border-radius:50%;filter:blur(40px);opacity:0;transition:.25s; background:radial-gradient(circle,rgba(255,107,44,.7),transparent 68%);z-index:1; } .page-dark.shine .pathways .pathway:nth-of-type(n+3):hover::after{opacity:1} .page-dark.shine .pathway:hover{transform:translateY(-3px)} .page-dark.shine .pathways .pathway:nth-of-type(n+3):hover{border-color:rgba(255,107,44,.42)} /* --- other paper-backed blocks --- */ .page-dark.shine .cap, .page-dark.shine .infra-item, .page-dark.shine .cs-stat, .page-dark.shine .tier-panels{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.012)); border-color:rgba(255,255,255,.08); } .page-dark.shine .tier-btn{ background:rgba(255,255,255,.03);color:var(--paper-70); } .page-dark.shine .tier-btn.is-on{ background:rgba(255,107,44,.14);color:var(--paper); box-shadow:inset 0 0 0 1px rgba(255,107,44,.45); } /* --- body copy that inherits an ink colour --- */ .page-dark.shine .prose, .page-dark.shine .value, .page-dark.shine .cap p, .page-dark.shine .infra-item p, .page-dark.shine .band-cap, .page-dark.shine .lead-line, .page-dark.shine .look{color:var(--paper-70)} .page-dark.shine .prose h2,.page-dark.shine .prose h3, .page-dark.shine .value h3,.page-dark.shine .cap h3, .page-dark.shine .look-k{color:var(--paper)} .page-dark.shine .statement{color:var(--paper)} .page-dark.shine .say{color:var(--ember-lit)} .page-dark.shine .hero-kicker{color:var(--ember-hi)} /* --- hairlines that were tuned for white --- */ .page-dark.shine .serve, .page-dark.shine .value, .page-dark.shine .st-foot, .page-dark.shine .crumbs, .page-dark.shine .secnav-row{border-color:rgba(255,255,255,.10)} /* --- logo marquee --- */ .page-dark.shine .mq-i{color:var(--paper-50)} .page-dark.shine .mq-d{color:var(--ember-lit)} /* --- mobile nav drops out of the paper panel --- */ /* superseded by the 820px block at the end of this file */ /* --- section nav on interior pages --- */ .page-dark.shine .secnav a{color:var(--paper-50)} .page-dark.shine .secnav a:hover, .page-dark.shine .nav-parent--current{color:var(--ember-hi)} /* --- scrims over hero imagery stay legible --- */ .page-dark.shine .le-hero-scrim, .page-dark.shine .le-band-scrim{ background:linear-gradient(180deg,rgba(10,9,8,.35),rgba(10,9,8,.88)); } /* --- .cta: the orange closing band ----------------------------- His stylesheet puts near-black text on the orange. Black on orange is hard to read and looks like a warning label, so the band goes white-on-orange: white headline, white copy, white solid button with orange text, white-outlined ghost. */ .page-dark.shine .cta{ background:linear-gradient(135deg,#FF6B2C 0%,#E2662D 45%,#C64E18 100%); color:#fff; } .page-dark.shine .cta h2, .page-dark.shine .cta .h2{color:#fff;text-shadow:0 2px 24px rgba(90,25,0,.35)} .page-dark.shine .cta .lede{color:rgba(255,255,255,.92)} .page-dark.shine .cta .eyebrow{color:rgba(255,255,255,.85)} .page-dark.shine .cta .eyebrow::after{ background:linear-gradient(90deg,rgba(255,255,255,.6),transparent); } .page-dark.shine .cta .btn--solid{ background:#fff;color:#C64E18;border-color:#fff; box-shadow:0 18px 44px -14px rgba(60,18,0,.6); } .page-dark.shine .cta .btn--solid:hover{background:#fff;color:#A33D10} .page-dark.shine .cta .btn--solid::after{ background:linear-gradient(115deg,transparent 32%,rgba(255,180,140,.55) 50%,transparent 68%); } .page-dark.shine .cta .btn--ghost{ color:#fff;border-color:rgba(255,255,255,.75);background:transparent; } .page-dark.shine .cta .btn--ghost:hover{ background:#fff;color:#C64E18;border-color:#fff; } /* ============================================================ 20. ADOPT .on-ink SEMANTICS PAGE-WIDE styles.min.css already has a dark-context rule set, but it only applies inside a wrapper carrying .on-ink. On a fully dark page every section is an ink context, so mirror that set here rather than adding .on-ink to markup by hand. Deliberately NOT mirrored: `.on-ink .cap`, which keeps ink text because .cap is a light card sitting ON an ink band. Section 19 converts .cap itself, so its text has to follow. ============================================================ */ .page-dark.shine .value{border-top-color:rgba(255,255,255,.10)} .page-dark.shine .value .vh{color:var(--paper)} .page-dark.shine .value p{color:var(--paper-70)} .page-dark.shine .fineprint{color:var(--paper-50)} .page-dark.shine .svc-list li{color:var(--paper-70)} .page-dark.shine .mk--i, .page-dark.shine .hub-tag{color:var(--ember-lit)} .page-dark.shine .hub p{color:var(--paper-70);opacity:1} .page-dark.shine .look figcaption{color:var(--paper-70)} .page-dark.shine .prose p{color:var(--paper-70)} .page-dark.shine .prose p strong, .page-dark.shine .prose .lead-line{color:var(--paper)} .page-dark.shine .prose a:not(.btn){color:var(--ember-hi)} .page-dark.shine .prose p.band-cap{color:var(--ember-lit)} /* .cap was converted to glass in section 19, so its text inverts too -- the opposite of what .on-ink does for it on the white site */ .page-dark.shine .cap, .page-dark.shine .cap h3, .page-dark.shine .cap .h3{color:var(--paper)} .page-dark.shine .cap p{color:var(--paper-70)} .page-dark.shine .cap .k{color:var(--ember-hi)} /* an .on-ink band sitting inside an already-dark page should not re-paint itself with the old flat --ink; let it read as a slightly raised plane instead */ .page-dark.shine .on-ink{background:rgba(255,255,255,.022)} .page-dark.shine .on-ink[aria-label="Reliability"]{background:rgba(255,255,255,.04)} .page-dark.shine .on-ink .btn--solid{ background:linear-gradient(135deg,var(--ember-lit),var(--atelier-orange-dark)); border-color:transparent;color:#fff; } /* --- .secnav: the sticky section nav on interior pages --- */ .page-dark.shine .secnav{ background:rgba(10,9,8,.80); -webkit-backdrop-filter:saturate(1.2) blur(12px); backdrop-filter:saturate(1.2) blur(12px); border-bottom-color:rgba(255,255,255,.10); } .page-dark.shine .secnav-row a{color:var(--paper-50)} .page-dark.shine .secnav-row a:hover, .page-dark.shine .secnav-row a.is-active{color:var(--paper)} .page-dark.shine .secnav-row a::after{background:var(--ember-lit)} .page-dark.shine .secnav-out{color:var(--ember-hi)!important} /* ============================================================ 21. SECTION LIGHT The fixed aurora only lights one viewport. These give every band its own edge so the page keeps catching light as it scrolls rather than going flat below the fold. ============================================================ */ .page-dark.shine main>section{position:relative;overflow-x:clip} .page-dark.shine main>section::before{ content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); } .page-dark.shine main>section:nth-of-type(odd)::after{ content:'';position:absolute;left:0;top:-140px;width:62%;height:340px; pointer-events:none;z-index:0;border-radius:50%;filter:blur(80px); background:radial-gradient(ellipse at center,rgba(255,107,44,.20),transparent 68%); } .page-dark.shine main>section:nth-of-type(even)::after{ content:'';position:absolute;right:0;top:-140px;width:62%;height:340px; pointer-events:none;z-index:0;border-radius:50%;filter:blur(80px); background:radial-gradient(ellipse at center,rgba(91,141,239,.16),transparent 68%); } /* NOTE: do NOT blanket-set position on section children. Several sections (.le-hero, .le-band, .sec--bg) are flex or isolated containers whose and scrim layers are absolutely positioned; forcing them to relative turns them into flow items and collapses the text column. Confine the glow instead. */ .page-dark.shine main>section{isolation:isolate} .page-dark.shine main>section::after{z-index:-1} /* the orange band supplies its own light */ .page-dark.shine main>section.cta::after{display:none} /* lift the raised planes so they separate from the canvas */ .page-dark.shine .workcard, .page-dark.shine .pathways .pathway:nth-of-type(n+3), .page-dark.shine .cap, .page-dark.shine .stat, .page-dark.shine .infra-item{ background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025)); } .page-dark.shine #services{background:rgba(255,255,255,.022)} .page-dark.shine .clients{background:rgba(255,255,255,.05)} /* the 26px dash that leads every eyebrow */ .page-dark.shine .eyebrow::before{background:var(--ember-lit)} .page-dark.shine .cta .eyebrow::before{background:rgba(255,255,255,.9)} /* the glows are decorative and must never widen the page */ /* NO overflow on the body. On iOS, overflow on body/html changes the scrolling element and, with fixed-position layers present, offsets hit testing by the scroll amount -- taps land on whatever element is at the untranslated coordinates, which is why footer links went to the wrong page and the game's buttons stopped responding. Overflow is contained on the individual sections instead. */ .shine .aurora,.shine .grain{overflow:hidden} /* ============================================================ 22. HAIRLINE GRIDS .caps, .proc, .paths and friends separate their cells with a 1px gap and let the CONTAINER background show through as the divider. That hairline is --hair (dark on white) and simply disappears on a dark page, so the cells fuse into one slab. Give the gap a visible colour and let it do its job. ============================================================ */ .page-dark.shine .caps, .page-dark.shine .proc, .page-dark.shine .paths{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.10); border-radius:6px;overflow:hidden; } /* a slightly wider gutter reads as deliberate rather than a seam */ .page-dark.shine .caps{gap:1px} /* a 4th cell in a 3-up grid leaves a hole; let it run the full width instead of sitting as an orphan */ .page-dark.shine .caps--3 > .cap:nth-child(4):last-child{ grid-column:1 / -1; } .page-dark.shine .caps--3 > .cap:nth-child(4):last-child p{max-width:70ch} @media(max-width:900px){ .page-dark.shine .caps--3 > .cap:nth-child(4):last-child{grid-column:auto} } /* ============================================================ 23. WARM THE GLASS White-on-black translucency reads as dead neutral gray. Tinting the fills warm makes them sit in the same light as the page instead of looking like flat cutouts laid on top of it. ============================================================ */ .page-dark.shine .cap, .page-dark.shine .stat, .page-dark.shine .infra-item, .page-dark.shine .workcard, .page-dark.shine .pathways .pathway:nth-of-type(n+3){ background: linear-gradient(180deg,rgba(255,214,190,.10),rgba(255,190,160,.022)), linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)); } /* every glass cell gets its own lit top edge, including grid cells that sit inside an overflow:hidden container */ .page-dark.shine .cap, .page-dark.shine .stat{position:relative} .page-dark.shine .cap::after, .page-dark.shine .stat::after{ content:'';position:absolute;inset:0 0 auto 0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent); } /* --- the track-record numbers --- The white-to-peach gradient washed out at large sizes. Run it the other way: hot orange core, pale tip, and a real glow. */ .page-dark.shine .st-n{ background:linear-gradient(170deg,#FFD9C2 0%,#FF9A5A 34%,#FF6B2C 78%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 46px rgba(255,107,44,.55); } .page-dark.shine .st-l{color:rgba(246,243,238,.62)} /* image captions were tuned for ink on white */ .page-dark.shine figcaption, .page-dark.shine .look figcaption, .page-dark.shine .gfx figcaption, .page-dark.shine .band-cap{color:rgba(246,243,238,.58)} .page-dark.shine figcaption strong, .page-dark.shine .look-k{color:var(--paper)} /* media tiles get an edge so they do not float as bare rectangles */ .page-dark.shine .look img, .page-dark.shine .gfx img, .page-dark.shine .cs-media img, .page-dark.shine .wc-media img{ border-radius:4px; } .page-dark.shine .look, .page-dark.shine .gfx{ position:relative;border-radius:5px;overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.07); } /* ============================================================ 24. NAV DROPDOWN OVERFLOW (pre-existing bug, fixed here) .subnav is `position:absolute; left:-14px; min-width:264px`. The About item sits near the right edge, so between roughly 1024px and 1150px wide the panel extends past the viewport and adds ~14px of horizontal scroll to the whole page. It does this even while hidden, because visibility:hidden still takes space in the layout box. This is present in styles.min.css independently of the shine layer -- worth fixing at the source too. Anchoring the last dropdown to its right edge instead of its left solves it. ============================================================ */ .shine .nav-item.nav-has-sub:last-of-type .subnav, .shine .nav-item.nav-has-sub:nth-last-of-type(-n+2) .subnav{ left:auto;right:-14px; } /* belt and braces: a hidden dropdown should not contribute layout width at all until it is actually needed */ .shine .subnav{contain:layout} /* and nothing anywhere may widen the document */ /* removed: see the note above -- never set overflow on body here */ @media(max-width:900px){ /* mobile nav is a stacked panel, so put it back to normal flow */ .shine .nav-item.nav-has-sub:last-of-type .subnav, .shine .nav-item.nav-has-sub:nth-last-of-type(-n+2) .subnav{ left:auto;right:auto; } } /* ============================================================ 25. REMAINING PAGES Everything below covers about, capabilities, case-studies, contact, crew, public-meetings, rio-grande-valley-production, video-production and work. Grouped by the problem, not by the page, because most of these classes recur. ============================================================ */ /* --- ink body copy that never had an .on-ink counterpart --- */ .page-dark.shine .bighead, .page-dark.shine .cs-n, .page-dark.shine .proc-list li, .page-dark.shine .tier-name{color:var(--paper)} .page-dark.shine .cs-delivered li, .page-dark.shine .cs-result p, .page-dark.shine .cs-lead, .page-dark.shine .cs-body, .page-dark.shine .pm-note p, .page-dark.shine .svc li span, .page-dark.shine .svc-for, .page-dark.shine .tier-cta p, .page-dark.shine .tier-hint, .page-dark.shine .tier-panel li span, .page-dark.shine .wc-client, .page-dark.shine .reg-body, .page-dark.shine .form-note, .page-dark.shine .hint{color:var(--paper-70)} .page-dark.shine .bighead .dot, .page-dark.shine .cs-k, .page-dark.shine .mk, .page-dark.shine .conf-eyebrow{color:var(--ember-lit)} /* --- hairline grids (same trick as .caps) --- */ .page-dark.shine .cs-stats, .page-dark.shine .stats, .page-dark.shine .iv-grid, .page-dark.shine .stillgrid, .page-dark.shine .fgrid{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.10); } .page-dark.shine .proc-list li, .page-dark.shine .svc, .page-dark.shine .cs-detail, .page-dark.shine .sg-item{border-color:rgba(255,255,255,.10)} /* --- media tiles that were given a flat --ink fill --- */ .page-dark.shine .photoband, .page-dark.shine .iv-cell, .page-dark.shine .poster, .page-dark.shine .reel-media, .page-dark.shine .reel-still, .page-dark.shine .still{ background:rgba(255,255,255,.04); } .page-dark.shine .reel-card, .page-dark.shine .cs, .page-dark.shine .sg-item{ position:relative;border-radius:6px;overflow:hidden; } .page-dark.shine .reel-card{box-shadow:0 0 0 1px rgba(255,255,255,.07)} .page-dark.shine .reel-card:hover{ box-shadow:0 0 0 1px rgba(255,107,44,.42),0 30px 70px -28px rgba(0,0,0,.9); } /* --- play button on the reel --- */ .page-dark.shine .play{ background:rgba(10,9,8,.65);border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(6px);color:#fff; } .page-dark.shine .has-poster:hover .play{ background:var(--ember-lit);border-color:var(--ember-lit); box-shadow:0 0 34px -6px rgba(255,107,44,.9); } /* --- tag pills --- */ .page-dark.shine .tags li{ border-color:rgba(255,255,255,.18);color:var(--paper-50); background:rgba(255,255,255,.04); } /* --- public-meetings tier switcher --- */ .page-dark.shine .tier-nav{ background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10); } .page-dark.shine .tier-head{color:var(--paper)} .page-dark.shine .tier-n{color:var(--ember-hi)} .page-dark.shine .sec--bg-soft{background:rgba(255,255,255,.022)} /* --- capabilities spec lists --- */ .page-dark.shine .svc h3, .page-dark.shine .iv-cap{color:var(--paper)} .page-dark.shine .iv-cap{color:var(--paper-50)} /* --- forms: contact and crew --- */ .page-dark.shine .form-grid input, .page-dark.shine .form-grid textarea, .page-dark.shine .form-grid select, .page-dark.shine .crewform input, .page-dark.shine .crewform textarea, .page-dark.shine .crewform select{ background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16); color:var(--paper);border-radius:3px; } .page-dark.shine .form-grid input:focus, .page-dark.shine .form-grid textarea:focus, .page-dark.shine .form-grid select:focus, .page-dark.shine .crewform input:focus, .page-dark.shine .crewform textarea:focus, .page-dark.shine .crewform select:focus{ border-color:rgba(255,107,44,.75);outline:none; box-shadow:0 0 0 3px rgba(255,107,44,.16); } .page-dark.shine .grp, .page-dark.shine .field, .page-dark.shine .row, .page-dark.shine .inquiry{border-color:rgba(255,255,255,.10)} .page-dark.shine .grp-legend, .page-dark.shine .lbl, .page-dark.shine .t{color:var(--paper-50)} .page-dark.shine .req{color:var(--ember-lit)} .page-dark.shine .opt{color:var(--dimmer)} .page-dark.shine .check, .page-dark.shine .chk, .page-dark.shine .consent, .page-dark.shine .svc-checks label{color:var(--paper-70)} .page-dark.shine input[type=checkbox], .page-dark.shine input[type=radio]{accent-color:var(--ember-lit)} .page-dark.shine .err, .page-dark.shine .form-error{color:#FF9A8A} .page-dark.shine .invalid-target{ border-color:rgba(216,38,43,.8)!important; box-shadow:0 0 0 3px rgba(216,38,43,.18)!important; } .page-dark.shine .form-success{color:var(--paper)} .page-dark.shine .fs-mark{color:#8FE3B4} .page-dark.shine .form-foot, .page-dark.shine .submit-row{border-color:rgba(255,255,255,.10)} /* --- the solid button inside hero and inquiry blocks --- His rule paints it --ember with --ink text; on dark that reads as muddy. Match the shine button instead. */ .page-dark.shine .hero-cta .btn--solid, .page-dark.shine .inquiry .btn--solid{ background:linear-gradient(135deg,var(--ember-lit),var(--atelier-orange-dark)); color:#fff;border-color:transparent; } .page-dark.shine .btn--onink{color:var(--paper);border-color:rgba(255,255,255,.45)} .page-dark.shine .btn--onink:hover{background:var(--paper);color:var(--ink)} /* --- case-study reel marquee --- */ .page-dark.shine .reelband{background:rgba(255,255,255,.03)} .page-dark.shine .reel-h{color:var(--paper)} .page-dark.shine .reel-sub{color:var(--paper-70)} .page-dark.shine .stillband{background:rgba(255,255,255,.022)} /* --- rio-grande-valley region blocks --- */ .page-dark.shine .reg{border-color:rgba(255,255,255,.10)} .page-dark.shine .reg h3{color:var(--paper)} /* --- meeting-AV platform row --- */ .page-dark.shine .plat{color:var(--paper-50)} .page-dark.shine .pm-ast{color:var(--ember-lit)} /* ============================================================ 26. PAGE-LEVEL