@font-face{ font-family:'Sailors'; src:url('assets/fonts/Sailors.otf') format('opentype'); font-weight:400; font-style:normal; font-stretch:normal; font-display:swap; } @font-face{ font-family:'Sailors'; src:url('assets/fonts/SailorsSlant-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-stretch:normal; font-display:swap; } @font-face{ font-family:'Sailors'; src:url('assets/fonts/SailorsCondensed.otf') format('opentype'); font-weight:400; font-style:normal; font-stretch:condensed; font-display:swap; } @font-face{ font-family:'Sailors'; src:url('assets/fonts/SailorsCondensedSlant-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-stretch:condensed; font-display:swap; } @font-face{ font-family:'Sailors Rough'; src:url('assets/fonts/SailorsRough.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } :root{ --navy:#0E3D8A; --navy-deep:#0E1437; --orange:#EF4806; --white:#FFFFFF; --bg:#F8F8F8; --ink:#1B2246; --ink-soft:#5B6180; --ink-faint:#9195AC; --line:#E3E5F0; --radius:16px; --font-display:'Sailors', 'Baloo 2', sans-serif; --font-body:'myriad-pro-semi-condensed', 'Myriad Set Pro', 'Inter', 'Helvetica Neue', Arial, sans-serif; } *{box-sizing:border-box;} html,body{margin:0;height:100%;} body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; } button{font-family:inherit;} .rf-app{min-height:100dvh;display:flex;flex-direction:column;} /* ---------------- logo lockup ---------------- */ .rf-logos{ display:flex;align-items:center;justify-content:center;gap:16px; width:100%;margin-bottom:clamp(24px,4vw,48px); } .rf-logo{display:block;width:auto;} .rf-logo--ohte{height:55px;} .rf-logo--coe{height:55px;} /* ---------------- language switch ---------------- */ .rf-lang-switch{ position:absolute;top:clamp(24px,5vw,64px);right:clamp(24px,5vw,64px);z-index:2; display:flex;gap:2px;border:1.5px solid var(--line);border-radius:999px;padding:3px; background:var(--white); } .rf-lang-btn{ border:none;background:transparent;cursor:pointer;padding:5px 11px;border-radius:999px; font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--ink-soft); transition:background .15s,color .15s; } .rf-lang-btn:hover{color:var(--ink);} .rf-lang-btn.is-active{background:var(--orange);color:var(--white);} .rf-lang-switch--dark{border-color:rgba(255,255,255,.3);background:transparent;} .rf-lang-switch--dark .rf-lang-btn{color:rgba(255,255,255,.65);} .rf-lang-switch--dark .rf-lang-btn:hover{color:var(--white);} .rf-lang-switch--dark .rf-lang-btn.is-active{background:var(--orange);color:var(--white);} /* embedded via iframe (e.g. a lightbox on another site) — see the detection script at the top of index.html's */ .is-embedded .rf-logos{display:none;} .is-embedded .rf-lang-switch{display:none;} /* ---------------- main / screens ---------------- */ .rf-main{flex:1 1 auto;min-height:0;display:flex;} .rf-screen{ position:relative;flex:1 1 auto;display:none;flex-direction:column;justify-content:flex-start; padding:clamp(24px,5vw,64px);max-width:1100px;margin:0 auto;width:100%; animation:rf-fade .35s ease both; } .rf-screen.is-active{display:flex;} @keyframes rf-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .rf-kicker{ text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:800; color:var(--orange);margin-bottom:12px; } .rf-h1{font-family:var(--font-display);font-weight:400;font-size:clamp(40px,7vw,84px);line-height:.96;margin:0 0 18px;color:var(--navy);text-transform:uppercase;letter-spacing:.01em;white-space:pre-line;} .rf-h2{font-family:var(--font-display);font-weight:400;font-size:clamp(17px,2.3vw,27px);line-height:1.05;margin:0 0 14px;color:var(--navy);text-transform:uppercase;white-space:pre-line;} .rf-orange{color:var(--orange);} .rf-lead{font-size:clamp(16px,1.8vw,19px);line-height:1.5;color:var(--ink-soft);max-width:52ch;margin:0 0 30px;white-space:pre-line;} .rf-lead--sm{font-size:15px;margin-bottom:22px;} .rf-note{font-size:13px;color:var(--ink-faint);font-style:italic;margin:14px 0 26px;} /* ---------------- buttons ---------------- */ .rf-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; border:none;cursor:pointer;border-radius:999px;font-weight:800;font-size:15px;letter-spacing:.02em; padding:0 28px;height:52px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .15s,opacity .15s; text-transform:uppercase; } .rf-btn--lg{height:60px;padding:0 34px;font-size:16px;align-self:flex-start;} .rf-btn--primary{background:var(--orange);color:var(--white);box-shadow:0 8px 22px rgba(255,87,34,.28);} .rf-btn--primary:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-2px);} .rf-btn--primary:active:not(:disabled){transform:translateY(0) scale(.98);} .rf-btn:disabled{opacity:.35;cursor:not-allowed;} .rf-arrow::after{content:"\2192";font-weight:800;} .rf-actions{display:flex;gap:14px;} /* ---------------- generation radio list ---------------- */ .rf-radio-list{display:flex;flex-direction:column;gap:10px;max-width:420px;margin-bottom:6px;} .rf-radio{ display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px; border:1.5px solid var(--line);cursor:pointer;transition:border-color .15s,background .15s;background:var(--white); } .rf-radio:hover{border-color:var(--orange);} .rf-radio input{accent-color:var(--orange);width:18px;height:18px;} .rf-radio.is-checked{border-color:var(--orange);background:#FFF4F0;} .rf-radio-label{font-size:15px;font-weight:400;color:var(--ink);} /* ---------------- question layout ---------------- */ .rf-question-layout{display:grid;grid-template-columns:65fr 35fr;gap:clamp(20px,4vw,48px);align-items:center;width:100%;} @media (max-width:820px){.rf-question-layout{grid-template-columns:1fr;}} .rf-media-pane{ position:relative;aspect-ratio:1161/1080;background:var(--navy-deep); /*box-shadow:0 20px 50px rgba(15,20,55,.25)*/;max-height:68vh;justify-self:center; width:min(100%, calc(68vh * 1161 / 1080)); } .rf-media-pane img{width:100%;height:auto;display:block;} /* intro screen — interactive magnifying glass over intro.jpg */ .rf-magnify-stage{position:relative;width:100%;height:100%;} .rf-magnify-base{user-select:none;-webkit-user-drag:none;} .rf-magnify-tool{ position:absolute;top:0;left:0;width:60%;z-index:3; cursor:grab;touch-action:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35)); } .rf-magnify-tool.is-dragging{cursor:grabbing;} .rf-magnify-glass-img{position:relative;z-index:2;width:100%;height:auto;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;} .rf-magnify-zoom{ position:absolute;z-index:1;left:22.48%;top:18.92%;width:27.01%;height:27.84%; border-radius:50%;overflow:hidden;background-repeat:no-repeat; } .rf-question-pane{position:relative;} .rf-level-badge{ width:80px;height:80px;border-radius:50%; background:var(--orange);color:var(--white); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; margin-bottom:22px; } .rf-level-badge-label{ font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; } .rf-level-badge-num{ font-family:var(--font-display);font-size:clamp(24px,6vw,32px);line-height:1;font-weight:400; } .rf-choices{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;} .rf-choices--grid{display:grid;grid-template-columns:1fr 1fr;} .rf-choice{ display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:12px; border:1.5px solid var(--line);cursor:pointer;background:var(--white);transition:border-color .15s,background .15s; } .rf-choice:hover{border-color:var(--orange);} .rf-choice.is-selected{border-color:var(--orange);background:#FFF4F0;} .rf-choice input{accent-color:var(--orange);width:17px;height:17px;} .rf-choice-label{font-size:15px;font-weight:400;color:var(--ink);} /* compare (A/B) — drag-reveal before/after slider */ .rf-reveal-wrap{position:relative;width:100%;height:100%;overflow:hidden;cursor:ew-resize;touch-action:pan-y;} .rf-reveal-bottom,.rf-reveal-top{position:absolute;inset:0;width:100%;height:100%;} .rf-reveal-bottom img,.rf-reveal-top img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none;} .rf-reveal-top{clip-path:inset(0 50% 0 0);} .rf-reveal-handle{ position:absolute;top:0;bottom:0;left:50%;width:0;z-index:3;pointer-events:none; animation:rf-handle-wobble 1.8s ease-in-out infinite; } .rf-reveal-wrap.has-selection .rf-reveal-handle, .rf-reveal-wrap.is-dragging .rf-reveal-handle{ animation:none; } @keyframes rf-handle-wobble{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} } .rf-reveal-handle::before{ content:"";position:absolute;top:0;bottom:0;left:0;width:2px;transform:translateX(-50%); background:#fff;box-shadow:0 0 10px rgba(0,0,0,.45); } .rf-reveal-handle-chevrons{ position:absolute;top:50%;left:0;transform:translate(-50%,-50%); display:flex;align-items:center;justify-content:center;gap:3px; color:#fff;font-size:19px;font-weight:700;line-height:1; text-shadow:0 2px 8px rgba(0,0,0,.6); } .rf-reveal-handle-chevrons span{display:block;} .rf-reveal-tag{ position:absolute;top:10px;font-weight:800;color:#fff;background:rgba(14,20,55,.7); width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;z-index:2; pointer-events:none;transition:background .15s; } .rf-reveal-tag--a{left:10px;} .rf-reveal-tag--b{right:10px;} .rf-reveal-tag.is-selected{background:var(--orange);} .rf-swipe-hint{ position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.65);font-size:11px;font-weight:600; background:rgba(14,20,55,.55);padding:5px 10px;border-radius:999px;pointer-events:none;letter-spacing:.02em;white-space:nowrap; } @media (max-width:520px){.rf-swipe-hint{display:none;}} /* hotspot layout */ .rf-hotspot-wrap{position:relative;width:100%;height:100%;} .rf-hotspot-wrap img{width:100%;height:auto;display:block;} .rf-hotspot{ position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%); cursor:pointer;padding:0;border:none;background:none; } .rf-hotspot-circle{ position:absolute;inset:0;border-radius:50%; border:3px dashed var(--orange);background:rgba(255,87,34,.3); transition:background .15s;pointer-events:none; animation:rf-hotspot-drift 2.4s ease-in-out infinite; } .rf-hotspot:hover .rf-hotspot-circle{background:rgba(255,87,34,.15);} .rf-hotspot-wrap.has-selection .rf-hotspot-circle{animation:none;} @keyframes rf-hotspot-drift{ 0%,100%{transform:translate(0,0);} 25%{transform:translate(3px,-2px);} 50%{transform:translate(-2px,3px);} 75%{transform:translate(2px,2px);} } .rf-hotspot.is-selected .rf-hotspot-circle{background:rgba(255,87,34,.3);} .rf-hotspot-badge{ position:absolute;top:0;left:0;transform:translate(-50%,-50%); width:38px;height:38px;border-radius:50%;background:rgba(14,20,55,.7);color:#fff; display:grid;place-items:center;font-weight:800;font-size:15px; box-shadow:0 4px 10px rgba(0,0,0,.35);pointer-events:none;transition:background .15s; } .rf-hotspot.is-selected .rf-hotspot-badge{background:var(--orange);} /* quadrant layout */ .rf-quadrant-wrap{position:relative;width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;} .rf-quadrant-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;} .rf-quad{position:relative;border:1px solid rgba(255,255,255,.25);cursor:pointer;} .rf-quad::after{content:attr(data-letter);position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;background:rgba(14,20,55,.7);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;transition:background .15s;} .rf-quad:hover{outline:3px solid var(--navy);outline-offset:-3px;} .rf-quad.is-selected{outline:3px solid var(--orange);outline-offset:-3px;} .rf-quad.is-selected::after{background:var(--orange);} /* timed layout */ .rf-timer{ position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display); font-size:30vh;color:rgba(255,255,255,.92);text-shadow:0 8px 30px rgba(0,0,0,.6);pointer-events:none;z-index:3; } /* video (level 5) — native controls replaced with a single play/pause button */ .rf-video-wrap{position:relative;width:100%;height:100%;display:flex;} .rf-video-wrap video{width:100%;height:auto;display:block;margin:auto;pointer-events:none;} .rf-video-play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:72px;height:72px;border-radius:50%;border:none;cursor:pointer; background:var(--orange);color:var(--white);box-shadow:0 8px 22px rgba(255,87,34,.35); display:grid;place-items:center;transition:transform .18s cubic-bezier(.34,1.56,.64,1),filter .15s; } .rf-video-play:hover{filter:brightness(1.06);transform:translate(-50%,-50%) scale(1.05);} .rf-video-play:active{transform:translate(-50%,-50%) scale(.96);} .rf-video-play svg{width:28px;height:28px;} .rf-video-play .rf-icon-play{margin-left:3px;} /* ---------------- feedback badges ---------------- */ .rf-feedback-badge{ position:absolute;top:14px;left:14px;background:rgba(14,20,55,.75);color:#fff;font-size:12px;font-weight:800; padding:6px 12px;border-radius:999px;letter-spacing:.04em;z-index:2; } /* ---------------- results ---------------- */ .rf-screen--results{ max-width:none;width:100%;background:#141414; align-items:center;justify-content:flex-start;text-align:center; padding-bottom:0; } .rf-screen--results .rf-h1{color:var(--white);max-width:820px;margin-left:auto;margin-right:auto;font-size:clamp(28px,4.5vw,52px);} .rf-share{margin:0 0 40px;} .rf-share-label{ text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:800; color:rgba(255,255,255,.6);margin:0 0 18px; } .rf-share-icons{display:flex;align-items:center;justify-content:center;gap:14px;} .rf-share-btn{ width:44px;height:44px;border-radius:50%;background:var(--orange);color:var(--white); display:grid;place-items:center;transition:transform .18s cubic-bezier(.34,1.56,.64,1),filter .15s; } .rf-share-btn:hover{filter:brightness(1.06);transform:translateY(-2px);} .rf-results-illustration{width:min(420px,60vw);height:auto;display:block;margin:auto 0 0;} .rf-screen--results #btn-restart{align-self:center;margin-top:32px;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;} }