/* ========================================================================== RISDON "the logo builds itself" LOADER — from the design handoff. Component scoped under .rdbr (verbatim from risdon-dbr-loader.html). .site-loader = our full-screen overlay wrapper; shows once per session (see inline pre-paint script in + wiring at top of site.js). ========================================================================== */ .site-loader{position:fixed;inset:0;z-index:999;background:#14100D;display:grid;place-items:center;transition:opacity .65s ease,visibility .65s ease} .site-loader.done{opacity:0;visibility:hidden} html.no-loader .site-loader{display:none} @media(max-width:640px){.site-loader .rdbr{--rdbr-size:170px}} .rdbr { --rdbr-size: 240px; --rdbr-duration: 7.5s; --rdbr-gold: #C9862B; --rdbr-gold-lt: #E2AA4E; --rdbr-ink: #14100D; --rdbr-bone: #F4EFE8; --rdbr-mink: #A89684; --rdbr-mink-dim: #8C7B6A; display: inline-flex; flex-direction: column; align-items: center; gap: calc(var(--rdbr-size) * 0.17); font-family: 'Inter Tight', system-ui, sans-serif; } .rdbr__stage { position: relative; width: var(--rdbr-size); height: var(--rdbr-size); } .rdbr__outline { position: absolute; inset: 0; overflow: visible; } .rdbr__outline rect { fill: none; stroke: var(--rdbr-gold); stroke-dasharray: 788; animation: rdbr-outline var(--rdbr-duration) cubic-bezier(.5,.15,.25,1) infinite; } .rdbr__interior { position: absolute; inset: calc(var(--rdbr-size) * 0.021); overflow: hidden; } /* --- DESIGN · blueprint guides --- */ .rdbr__guides { position: absolute; inset: 0; animation: rdbr-guides var(--rdbr-duration) ease infinite; } .rdbr__vline, .rdbr__hline { position: absolute; opacity: .55; } .rdbr__vline { top: 0; bottom: 0; left: 50%; width: 1px; background: repeating-linear-gradient(var(--rdbr-mink-dim) 0 5px, transparent 5px 11px); } .rdbr__hline { left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--rdbr-mink-dim) 0 5px, transparent 5px 11px); } .rdbr__tick { position: absolute; width: 16px; height: 16px; } .rdbr__tick--tl { top: 14px; left: 14px; border-top: 1.5px solid var(--rdbr-mink); border-left: 1.5px solid var(--rdbr-mink); } .rdbr__tick--tr { top: 14px; right: 14px; border-top: 1.5px solid var(--rdbr-mink); border-right: 1.5px solid var(--rdbr-mink); } .rdbr__tick--bl { bottom: 14px; left: 14px; border-bottom: 1.5px solid var(--rdbr-mink); border-left: 1.5px solid var(--rdbr-mink); } .rdbr__tick--br { bottom: 14px; right: 14px; border-bottom: 1.5px solid var(--rdbr-mink); border-right: 1.5px solid var(--rdbr-mink); } .rdbr__dim { position: absolute; top: 26px; left: 32px; right: 32px; display: flex; align-items: center; gap: 6px; } .rdbr__dim-line { flex: 1; height: 1px; background: var(--rdbr-mink-dim); } .rdbr__dim-cap { width: 5px; height: 5px; } .rdbr__dim-cap--l { border-left: 1.5px solid var(--rdbr-mink-dim); border-bottom: 1.5px solid var(--rdbr-mink-dim); transform: rotate(45deg); } .rdbr__dim-cap--r { border-right: 1.5px solid var(--rdbr-mink-dim); border-top: 1.5px solid var(--rdbr-mink-dim); transform: rotate(45deg); } .rdbr__dim-label { font-size: 8px; letter-spacing: 1.5px; color: var(--rdbr-mink); } /* --- DESIGN · ghost wordmark --- */ .rdbr__ghost { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; animation: rdbr-ghost var(--rdbr-duration) ease infinite; } .rdbr__ghost .rdbr__name { color: transparent; -webkit-text-stroke: .7px var(--rdbr-mink); } .rdbr__ghost .rdbr__sub { color: var(--rdbr-mink); } /* --- BUILD · rising gold fill (brick coursing) --- */ .rdbr__brick { position: absolute; inset: 0; animation: rdbr-brick var(--rdbr-duration) cubic-bezier(.3,.65,.25,1) infinite; } .rdbr__brick-fill { position: absolute; inset: 0; background-color: var(--rdbr-gold); background-image: linear-gradient(rgba(20,16,13,.16) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(20,16,13,.16) 1.5px, transparent 1.5px); background-size: 44px 22px; } /* --- RENOVATE · finished mark restoring --- */ .rdbr__final { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; animation: rdbr-final var(--rdbr-duration) ease infinite; } .rdbr__final .rdbr__name { color: var(--rdbr-bone); animation: rdbr-restore var(--rdbr-duration) ease infinite; } .rdbr__final .rdbr__sub { color: var(--rdbr-mink); } .rdbr__rule { width: calc(var(--rdbr-size) * 0.167); height: 2.4px; background: var(--rdbr-gold); transform-origin: center; animation: rdbr-rule var(--rdbr-duration) ease infinite; } /* --- RENOVATE · polish sweep --- */ .rdbr__sweep { position: absolute; top: -40px; bottom: -40px; left: 0; width: 64px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(244,239,232,.85), rgba(226,170,78,.5), transparent); transform: rotate(15deg); animation: rdbr-sweep var(--rdbr-duration) cubic-bezier(.4,.1,.2,1) infinite; } /* --- shared type --- */ .rdbr__name { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: calc(var(--rdbr-size) * 0.15); letter-spacing: 1.5px; line-height: 1; } .rdbr__sub { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 600; font-size: calc(var(--rdbr-size) * 0.044); letter-spacing: 3.8px; padding-left: 3.8px; } /* --- phase ticker + progress --- */ .rdbr__ticker { display: flex; flex-direction: column; align-items: center; gap: 18px; width: calc(var(--rdbr-size) * 1.42); } .rdbr__words { display: flex; align-items: center; gap: 22px; font-family: 'Fraunces', Georgia, serif; font-size: calc(var(--rdbr-size) * 0.079); } .rdbr__word { color: var(--rdbr-gold); } .rdbr__word--d { animation: rdbr-wd var(--rdbr-duration) ease infinite; } .rdbr__word--b { animation: rdbr-wb var(--rdbr-duration) ease infinite; } .rdbr__word--r { animation: rdbr-wr var(--rdbr-duration) ease infinite; } .rdbr__dot { width: 4px; height: 4px; border-radius: 50%; background: #3A342C; } .rdbr__progress { width: 100%; height: 2px; background: #2E2820; border-radius: 2px; overflow: hidden; } .rdbr__progress-bar { width: 100%; height: 100%; background: var(--rdbr-gold); transform-origin: left; animation: rdbr-prog var(--rdbr-duration) linear infinite; } /* ============ ONE-SHOT variant (add class rdbr--once) ============ */ .rdbr--once .rdbr__outline rect, .rdbr--once .rdbr__guides, .rdbr--once .rdbr__ghost, .rdbr--once .rdbr__brick, .rdbr--once .rdbr__rule, .rdbr--once .rdbr__sweep, .rdbr--once .rdbr__progress-bar, .rdbr--once .rdbr__word--d, .rdbr--once .rdbr__word--b { animation-iteration-count: 1; animation-fill-mode: forwards; } .rdbr--once .rdbr__final { animation-name: rdbr-final-once; animation-iteration-count: 1; animation-fill-mode: forwards; } .rdbr--once .rdbr__final .rdbr__name { animation-iteration-count: 1; animation-fill-mode: forwards; } .rdbr--once .rdbr__word--r { animation-name: rdbr-wr-once; animation-iteration-count: 1; animation-fill-mode: forwards; } /* ============ keyframes ============ */ @keyframes rdbr-outline { 0%{stroke-dashoffset:788; stroke-width:1.3} 30%{stroke-dashoffset:0; stroke-width:1.3} 39%{stroke-width:3.4} 100%{stroke-dashoffset:0; stroke-width:3.4} } @keyframes rdbr-guides { 0%{opacity:1} 30%{opacity:1} 37%{opacity:0} 96%{opacity:0} 100%{opacity:1} } @keyframes rdbr-ghost { 0%{opacity:0} 9%{opacity:.5} 30%{opacity:.5} 38%{opacity:0} 100%{opacity:0} } @keyframes rdbr-brick { 0%{transform:translateY(102%); opacity:1} 34%{transform:translateY(102%); opacity:1} 60%{transform:translateY(0); opacity:1} 68%{transform:translateY(0); opacity:1} 80%{transform:translateY(0); opacity:0} 100%{opacity:0} } @keyframes rdbr-final { 0%{opacity:0; filter:blur(6px) contrast(.5) brightness(.78); transform:scale(.97)} 64%{opacity:0; filter:blur(6px) contrast(.5) brightness(.78); transform:scale(.97)} 71%{opacity:1; filter:blur(5px) contrast(.58) brightness(.82); transform:scale(.985)} 87%{opacity:1; filter:blur(0) contrast(1) brightness(1); transform:scale(1)} 96%{opacity:1; filter:blur(0) contrast(1) brightness(1); transform:scale(1)} 100%{opacity:0; filter:blur(0) contrast(1) brightness(1); transform:scale(1)} } @keyframes rdbr-final-once { 0%{opacity:0; filter:blur(6px) contrast(.5) brightness(.78); transform:scale(.97)} 64%{opacity:0; filter:blur(6px) contrast(.5) brightness(.78); transform:scale(.97)} 71%{opacity:1; filter:blur(5px) contrast(.58) brightness(.82); transform:scale(.985)} 90%{opacity:1; filter:blur(0) contrast(1) brightness(1); transform:scale(1)} 100%{opacity:1; filter:blur(0) contrast(1) brightness(1); transform:scale(1)} } @keyframes rdbr-restore { 0%{text-shadow:3px 0 8px rgba(201,134,43,.65), -3px 0 8px rgba(140,123,106,.6)} 71%{text-shadow:3px 0 8px rgba(201,134,43,.65), -3px 0 8px rgba(140,123,106,.6)} 86%{text-shadow:none} 100%{text-shadow:none} } @keyframes rdbr-sweep { 0%{opacity:0; transform:translate(-120px,0) rotate(15deg)} 69%{opacity:0; transform:translate(-120px,0) rotate(15deg)} 74%{opacity:.95} 84%{opacity:.95} 89%{opacity:0; transform:translate(120px,0) rotate(15deg)} 100%{opacity:0; transform:translate(120px,0) rotate(15deg)} } @keyframes rdbr-rule { 0%,66%{transform:scaleX(0)} 80%{transform:scaleX(1)} 96%{transform:scaleX(1)} 100%{transform:scaleX(0)} } @keyframes rdbr-wd { 0%{opacity:1} 30%{opacity:1} 35%{opacity:.26} 96%{opacity:.26} 100%{opacity:1} } @keyframes rdbr-wb { 0%{opacity:.26} 35%{opacity:.26} 40%{opacity:1} 62%{opacity:1} 67%{opacity:.26} 100%{opacity:.26} } @keyframes rdbr-wr { 0%{opacity:.26} 66%{opacity:.26} 71%{opacity:1} 96%{opacity:1} 100%{opacity:.26} } @keyframes rdbr-wr-once { 0%{opacity:.26} 66%{opacity:.26} 71%{opacity:1} 100%{opacity:1} } @keyframes rdbr-prog { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} } /* accessibility: no motion → show the finished mark, static */ @media (prefers-reduced-motion: reduce) { .rdbr *, .rdbr *::before, .rdbr *::after { animation: none !important; } .rdbr__guides, .rdbr__ghost, .rdbr__brick, .rdbr__sweep { display: none; } .rdbr__outline rect { stroke-dashoffset: 0; stroke-width: 3.4px; } .rdbr__final { opacity: 1; filter: none; } .rdbr__rule { transform: scaleX(1); } .rdbr__word--d, .rdbr__word--b { opacity: .26; } .rdbr__progress-bar { transform: scaleX(1); } }