/* =====================================================================
Rubikn ยท shared brand parts for every page (rubikn-brand.css)
---------------------------------------------------------------------
1. The dark palette (custom properties under html.dark).
2. The logo: the home page's 26 px 3D cube with the three-piece R,
with the home motion copied exactly (entrance on load, lift + twist
+ pieces on hover, entrance again when the pointer leaves).
3. The light / dark switch (.rk-theme) for both header styles:
the floating .rk-hd bar and the sticky .rh-hd header.
Loaded on every page. Nothing here changes a light page apart from the
logo motion and the switch. The theme state (html.dark) is set before
first paint by /assets/rubikn-theme.js. Spec: scripts/DARK-MODE-SPEC.md.
===================================================================== */
/* ---------------------------------------------------------------------
1. DARK PALETTE. Derived from the brand dark tokens (paper
oklch(.115 .015 260) ... accent oklch(.60 .18 258)), lifted a step so
raised panels read as separate surfaces. Contrast (WCAG 2.x) on
bg / raised / raised-2:
--rk-d-text 16.0 / 14.7 / 13.1
--rk-d-text-2 10.5 / 9.7 / 8.6
--rk-d-text-3 7.9 / 7.3 / 6.5
--rk-d-accent 9.4 / 8.7 / 7.7 (text, links, focus)
--rk-d-accent-strong 4.3 / 3.9 / 3.5 (fills only; #fff on it 4.6)
--rk-d-ok 14.3 / 13.2 / 11.8
--rk-d-warn 9.6 / 8.8 / 7.9
--rk-d-line-2 3.6 / 3.3 / 2.9 (field borders, 3:1 on bg/raised)
The navy footer (#060a15) takes every text colour at the bg values.
--------------------------------------------------------------------- */
html.dark {
--rk-d-bg: #070b13; /* page oklch(.15 .018 262) */
--rk-d-raised: #111620; /* panels oklch(.20 .021 262) */
--rk-d-raised-2: #1b212b; /* cards on panels, fields oklch(.245 .022 262) */
--rk-d-line: #2d333d; /* hairlines oklch(.32 .02 262) */
--rk-d-line-2: #636975; /* strong lines, field borders oklch(.52 .02 262) */
--rk-d-text: #e4e8ed; /* body text, headings oklch(.93 .008 255) */
--rk-d-text-2: #b8bec7; /* secondary text oklch(.80 .014 255) */
--rk-d-text-3: #9ea5af; /* muted text, captions oklch(.72 .016 255) */
--rk-d-accent: #8db3ff; /* cobalt text, links, focus ring oklch(.77 .12 264) */
--rk-d-accent-strong: #4270da; /* cobalt fills: dots, chips, bars oklch(.57 .17 264) */
--rk-d-ok: #b0ee65; /* lime ticks oklch(.88 .18 130) */
--rk-d-warn: #f0a556; /* amber, warnings only oklch(.78 .13 65) */
color-scheme: dark;
}
/* no light canvas behind a dark page (pages still paint their own surfaces) */
html.dark,
html.dark body { background-color: var(--rk-d-bg); }
/* ---------------------------------------------------------------------
2. THE LOGO CUBE (values from site/index.html .rh-cube, keyframes
renamed rk-*). Markup:
inside a logo link: .rk-hd__logo, .rh-brand or [data-rk-logo].
--------------------------------------------------------------------- */
.rk-cube {
--cube: 26px;
--rk-cube-f: #0a0f1f; /* front / back */
--rk-cube-s: #1f2433; /* sides */
--rk-cube-t: #171b27; /* top / bottom */
--rk-cube-r: #f8f8fa; /* the R */
width: var(--cube); height: var(--cube);
position: relative; display: inline-block; flex: none;
transform-style: preserve-3d;
}
.rk-cube i {
position: absolute; inset: 0; display: grid; place-items: center;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
border-radius: 1px; background: var(--rk-cube-f);
font-style: normal;
}
.rk-cube i:nth-child(1) { transform: translateZ(calc(var(--cube) / 2)); }
.rk-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.rk-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); background: var(--rk-cube-s); }
.rk-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); background: var(--rk-cube-s); }
.rk-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); background: var(--rk-cube-t); }
.rk-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); background: var(--rk-cube-t); }
.rk-cube svg { display: block; width: calc(var(--cube) * 12 / 26); height: auto; fill: var(--rk-cube-r); overflow: visible; }
.rk-cube svg path { transform-box: fill-box; transform-origin: center; }
/* entrance on load, by CSS alone (home: html[data-rh-hero="in"]) */
.rk-cube .r1 { animation: rk-en1 .7s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
.rk-cube .r2 { animation: rk-en2 .7s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
.rk-cube .r3 { animation: rk-en3 .7s cubic-bezier(.34, 1.56, .64, 1) .6s both; }
/* the logo link: lift, and the perspective the twist is seen through */
.rk-hd__logo, .rh-brand, [data-rk-logo] { perspective: 800px; transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }
.rk-hd__logo:hover, .rh-brand:hover, [data-rk-logo]:hover { transform: translateY(-1px) scale(1.03); }
/* the floating bar keeps its 36 px mark box; the cube fills it. The mark passes the link's
3D context through (no perspective of its own), so the twist is seen through the link's
perspective exactly as on home. Home's vanishing point sits 32 px right of the cube centre
(link centre, 26 px cube + 12 px gap + name); the wider 36 px bar link gets the same offset. */
.rk-hd__logo .rk-hd__mark { perspective: none; transform-style: preserve-3d; display: grid; place-items: center; }
.rk-hd__logo { perspective-origin: 50px 50%; }
.rk-hd__mark .rk-cube { --cube: 36px; }
/* hover: the cube twists a full turn while the three pieces burst and snap back.
When the pointer leaves, the pieces take their entrance again (as on home). */
:is(.rk-hd__logo, .rh-brand, [data-rk-logo]):hover .rk-cube { animation: rk-twist .9s cubic-bezier(.25, 1, .5, 1); }
:is(.rk-hd__logo, .rh-brand, [data-rk-logo]):hover .rk-cube .r1 { animation: rk-pc1 .9s cubic-bezier(.25, 1, .5, 1); }
:is(.rk-hd__logo, .rh-brand, [data-rk-logo]):hover .rk-cube .r2 { animation: rk-pc2 .9s cubic-bezier(.25, 1, .5, 1); }
:is(.rk-hd__logo, .rh-brand, [data-rk-logo]):hover .rk-cube .r3 { animation: rk-pc3 .9s cubic-bezier(.25, 1, .5, 1); }
@keyframes rk-twist { 0% { transform: rotateY(0) rotateX(0); } 25% { transform: rotateY(90deg) rotateX(10deg); } 50% { transform: rotateY(180deg) rotateX(0); } 75% { transform: rotateY(270deg) rotateX(-10deg); } 100% { transform: rotateY(360deg) rotateX(0); } }
@keyframes rk-pc1 { 0%, 100% { transform: none; } 8%, 50% { transform: translate(-22%, -14%) rotate(-12deg); } 85% { transform: translate(-3%, -1%) rotate(-1deg); } }
@keyframes rk-pc2 { 0%, 100% { transform: none; } 8%, 50% { transform: translate(14%, -24%) rotate(10deg); } 85% { transform: translate(2%, -3%) rotate(1deg); } }
@keyframes rk-pc3 { 0%, 100% { transform: none; } 8%, 50% { transform: translate(20%, 18%) rotate(14deg); } 85% { transform: translate(3%, 2%) rotate(1deg); } }
@keyframes rk-en1 { from { opacity: 0; transform: translateX(-50%) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes rk-en2 { from { opacity: 0; transform: translateY(-50%) rotate(15deg); } to { opacity: 1; transform: none; } }
@keyframes rk-en3 { from { opacity: 0; transform: translate(40%, 40%) rotate(25deg); } to { opacity: 1; transform: none; } }
/* on a dark header (dark mode, or the floating bar over a dark section): light faces, ink R */
html.dark .rk-cube,
.rk-hd[data-t="dark"] .rk-cube {
--rk-cube-f: #f8f8fa;
--rk-cube-s: #d8d8e0;
--rk-cube-t: #e4e4ea;
--rk-cube-r: #0a0f1f;
}
/* still: home's still mode and reduced motion rest on the finished logo */
html[data-rh-mode="still"] .rk-cube,
html[data-rh-mode="still"] .rk-cube .r1,
html[data-rh-mode="still"] .rk-cube .r2,
html[data-rh-mode="still"] .rk-cube .r3 { animation: none !important; }
html[data-rh-mode="still"] :is(.rk-hd__logo, .rh-brand, [data-rk-logo]) { transition-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) {
.rk-cube, .rk-cube .r1, .rk-cube .r2, .rk-cube .r3,
:is(.rk-hd__logo, .rh-brand, [data-rk-logo]):hover .rk-cube { animation: none !important; }
.rk-hd__logo, .rh-brand, [data-rk-logo] { transition-duration: 0s !important; }
}
/* ---------------------------------------------------------------------
3. THE LIGHT / DARK SWITCH. Markup (same on every page, in the header
bar after the nav links and before the phone Menu button):
Moon in light mode, sun in dark. 44 x 44 target, 2 px corners.
--------------------------------------------------------------------- */
.rk-theme {
-webkit-appearance: none; appearance: none;
position: relative; flex: none;
display: inline-grid; place-items: center;
width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0;
border: 1px solid transparent; border-radius: 2px;
background: transparent; color: inherit;
font: inherit; line-height: 1; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color .3s cubic-bezier(.23, 1, .32, 1), border-color .3s cubic-bezier(.23, 1, .32, 1), color .3s cubic-bezier(.23, 1, .32, 1), transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.rk-theme svg {
display: block; width: 18px; height: 18px;
fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.rk-theme__sun { display: none !important; }
html.dark .rk-theme__sun { display: block !important; }
html.dark .rk-theme__moon { display: none !important; }
.rk-theme:active { transform: scale(.92); transition-duration: .12s; }
@media (hover: hover) {
.rk-theme:hover { background-color: rgba(10, 15, 31, .06); }
.rk-theme:hover .rk-theme__moon { transform: rotate(-30deg) scale(1.15); }
.rk-theme:hover .rk-theme__sun { transform: rotate(90deg) scale(1.15); }
html.dark .rk-theme:hover,
.rk-hd[data-t="dark"] .rk-theme:hover { background-color: rgba(255, 255, 255, .08); }
}
.rk-theme:focus { outline: none; }
.rk-theme:focus-visible { outline: 2px solid #3b63d4; outline-offset: 3px; border-radius: 2px; }
.rk-hd[data-t="dark"] .rk-theme:focus-visible { outline-color: #7497ff; }
html.dark .rk-theme:focus-visible, html.dark .rk-hd[data-t="dark"] .rk-theme:focus-visible { outline-color: var(--rk-d-accent); }
/* no colour fades while the theme flips (a click on the toggle); the class lives for two frames */
html.rk-theme-switching, html.rk-theme-switching *, html.rk-theme-switching *::before, html.rk-theme-switching *::after { transition: none !important; }
/* in the sticky .rh-hd header (home, get in touch): the look of its Menu button */
.rh-hd .rk-theme { border-color: var(--edge, #d8d8e0); background-color: rgba(255, 255, 255, .6); }
@media (hover: hover) { .rh-hd .rk-theme:hover { background-color: #fff; border-color: var(--rule, #c8c8d2); } }
html.dark .rh-hd .rk-theme { border-color: var(--rk-d-line); background-color: rgba(255, 255, 255, .04); }
@media (hover: hover) { html.dark .rh-hd .rk-theme:hover { background-color: rgba(255, 255, 255, .08); border-color: var(--rk-d-line-2); } }
/* placement helpers: the switch sits after the nav and, on phones, beside Menu.
Pages set the exact gaps; these keep the bar in order where :has() is supported. */
.rk-hd__bar:has(> .rk-theme) > .rk-hd__logo { margin-inline-end: auto; }
.rk-hd__bar > .rk-theme + .rk-hd__menu { margin-inline-start: 0; }
.rh-hd__in:has(> .rk-theme) { justify-content: flex-start; }
.rh-hd__in:has(> .rk-theme) > .rh-brand { margin-inline-end: auto; }
@media (prefers-reduced-motion: reduce) {
.rk-theme, .rk-theme svg { transition: none !important; }
.rk-theme:active { transform: none; }
.rk-theme:hover .rk-theme__moon, .rk-theme:hover .rk-theme__sun { transform: none !important; }
}
html[data-rh-mode="still"] .rk-theme,
html[data-rh-mode="still"] .rk-theme svg { transition: none !important; }
html[data-rh-mode="still"] .rk-theme:hover svg { transform: none !important; }