/* ═══════════════════════════════════════════════════════════════
tlf-frame - standardisert "brand-phone-preview"-ramme for lyttio
═══════════════════════════════════════════════════════════════
Brukes for alle iframe-baserte player-previews (admin Test-modal,
salg2 demo-modal, white-label-eksempler, interaktiv player-demo).
Forholdstall (validert mot iPhone-design):
- Outer radius: 11.5% av bredden (~25 @220, ~37 @320, ~41 @360)
- Notch top: 5% av bredden
- Notch width: 19% av bredden
- Notch height: 1.6% av bredden
- Bezel padding: 8px FAST (matcher virkelige phone-bezels)
- Inner radius: outer − bezel
── BRUK ───────────────────────────────────────────────────────
STATIC (fast bredde):
FLUID (fyller parent, skalerer proporsjonalt):
── MODIFIERS ──────────────────────────────────────────────────
.tlf-frame--lift - subtil hover-løft 4px
.tlf-frame--deep-shadow - dypere skygge (fullscreen-modaler)
.tlf-frame--amber-rim - amber-glød (interaktiv demo)
══════════════════════════════════════════════════════════════ */
.tlf-frame {
--tlf-w: 320px;
--tlf-bezel: 8px;
width: var(--tlf-w);
background: #000;
/* Eksplisitt height (ikke aspect-ratio): aspect-ratio gjelder OUTER, og den
faste 8px-bezelen rundt skjuler INNER-flaten litt. Her settes height så
INNER blir nøyaktig 9:19.5 — da fyller en 390×844-iframe-skalering rammen
perfekt uten grått felt nederst. Speiler admin .pdm-iframe-shell. */
height: calc((var(--tlf-w) - var(--tlf-bezel) * 2) * 19.5 / 9 + var(--tlf-bezel) * 2);
border-radius: calc(var(--tlf-w) * 0.115);
padding: var(--tlf-bezel);
position: relative;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* Notch - sentrert øverst, skalerer proporsjonalt med --tlf-w */
.tlf-frame::before {
content: '';
position: absolute;
top: calc(var(--tlf-w) * 0.05);
left: 50%;
transform: translateX(-50%);
width: calc(var(--tlf-w) * 0.19);
height: calc(var(--tlf-w) * 0.016);
background: #1a1a1a;
border-radius: 100px;
z-index: 10;
pointer-events: none;
}
/* Statisk innhold (img / wrapper-div) - fyller innenfor bezel-padding.
.tlf-frame-content brukes som klippe-ramme for en injisert player-iframe
(admin "Test"-modal); selve iframen skaleres av regelen lenger ned. */
.tlf-frame > img,
.tlf-frame > .tlf-frame-content {
position: absolute;
inset: var(--tlf-bezel);
width: calc(100% - var(--tlf-bezel) * 2);
height: calc(100% - var(--tlf-bezel) * 2);
border: 0;
border-radius: calc(var(--tlf-w) * 0.115 - var(--tlf-bezel));
overflow: hidden;
display: block;
background: #0e1117;
}
/* Player-iframe: rendres ALLTID på ekte iPhone-viewport (390×844) og skaleres
med CSS transform til rammens innerflate. lyttio-playeren har fast px/SVG-
chrome (ikke internt flytende), så uten dette ser kontroller/typografi feil
ut på alle ikke-390 bredder — og ulikt per vindu/maskin. Dette er teknikken
"Fullvisning" (.pdm-live-full) og main.html .player-demo-phone allerede
bruker; her løftet til ALLE tlf-frame-konsumenter for konsistens.
Divisor må være px (390px) så length/length blir unitless — scale() krever
unitless, ellers blir transformen ugyldig.
- Direkte child: får egen bezel-inset + skalert border-radius.
- I .tlf-frame-content: wrapperen håndterer inset/radius/klipp, så iframen
ligger i 0,0 av wrapperen uten egen radius. */
.tlf-frame > iframe {
position: absolute;
inset: var(--tlf-bezel) auto auto var(--tlf-bezel);
width: 390px;
height: 844px;
border: 0;
display: block;
overflow: hidden;
background: #0e1117;
transform: scale(calc((var(--tlf-w) - var(--tlf-bezel) * 2) / 390px));
transform-origin: 0 0;
border-radius: calc(
(var(--tlf-w) * 0.115 - var(--tlf-bezel)) /
((var(--tlf-w) - var(--tlf-bezel) * 2) / 390px)
);
}
.tlf-frame > .tlf-frame-content > iframe {
position: absolute;
top: 0;
left: 0;
width: 390px;
height: 844px;
border: 0;
display: block;
background: #0e1117;
transform: scale(calc((var(--tlf-w) - var(--tlf-bezel) * 2) / 390px));
transform-origin: 0 0;
}
/* ═══════════════════════════════════════════════════════════════
FLUID-modus - skalering via container queries.
Parent (.tlf-frame-host) må ha container-type: inline-size.
--tlf-w settes til container-bredden (100cqi), så alle calc()
over skalerer proporsjonalt med hvor bredt frame-en faktisk
rendres. Inkluderer radius og notch-størrelser.
═══════════════════════════════════════════════════════════════ */
.tlf-frame-host {
container-type: inline-size;
width: 100%;
}
.tlf-frame--fluid {
--tlf-w: 100cqi;
/* width følger --tlf-w (ikke 100%): da kommer bredde, height-calc OG
iframe-transform-skala alle fra samme kilde. Default --tlf-w er 100cqi
(= full container, identisk med 100% i normaltilfellet), men når en
konsument låser --tlf-w til en høyde-bundet min() (/spill, demo-modal:
min(100cqi, (100dvh-6rem)*9/19.5)) krymper bredde og høyde sammen og
rammen beholder riktig telefon-aspekt på lave vindushøyder. */
width: var(--tlf-w);
}
/* ── MODIFIERS ─────────────────────────────────────────────── */
/* Subtil hover-løft (interaktiv demo-seksjon) */
.tlf-frame--lift {
transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}
.tlf-frame--lift:hover {
transform: translateY(-4px);
}
/* Dyp skygge for fullscreen-modaler (demo-modal) */
.tlf-frame--deep-shadow {
box-shadow:
0 40px 100px rgba(0, 0, 0, 0.8),
0 2px 8px rgba(232, 160, 48, 0.05);
}
/* Amber-glød (interaktiv demo) */
.tlf-frame--amber-rim {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.3),
0 24px 60px rgba(0, 0, 0, 0.5),
0 60px 120px rgba(232, 160, 48, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.04);
}