@charset "utf-8";
/* ==========================================================================
CamTalk / technology - the phone.
EVERY RULE IN THIS FILE IS INSIDE `@media (max-width: 1000px)`, which is
the project's own breakpoint, and every selector is under a class that
only this page carries (.tech_top, .tech_box, .tech_certification,
.techf). The wide window renders exactly what it rendered before this file
existed, and no other page can see a line of it.
It replaces css/camtalk-tech-hero.css, which styled the phone hero alone;
that file is gone, and a copy of it is in
.backup/tech-mobile-20260919/ with everything else this pass touched.
WHAT THE PAGE IS NOW, top to bottom: a full-screen hero with the picture
behind and the words in the bottom third; the four technologies, each one
marker, heading, paragraph and a wide frame; the Vision Engine block it
always had; the certificates as one large document at a time; and the
closing banner. The order of the middle two is flipped from the source
order with `order`, which is why .tech_box is a column flexbox here.
THE SYSTEM. One dark ground, one accent, one gutter, one radius. Nothing
glows, nothing is frosted, and no rule here paints a panel that the
composition does not need.
========================================================================== */
@media only screen and (max-width: 1000px) {
.tech_top,
.tech_box,
.tech_certification,
.techf {
/* The ground is the same #0b0b0f the main page's closing sections use,
so a reader arriving from there does not cross a seam. */
--tm-ink: #0b0b0f;
--tm-ink-2: #121219;
--tm-line: rgba(255, 255, 255, 0.10);
--tm-fg: #f4f2f7;
--tm-muted: rgba(255, 255, 255, 0.62);
--tm-accent: #ff3d76;
--tm-accent-deep: #ff2d6f;
/* 20px at 390, which is the brief's own starting point, and the same
share of the width at the two other sizes: 18px at 360, 22px at
430. One number for every section, so nothing steps in or out. */
--tm-gutter: clamp(16px, 5.1vw, 22px);
--tm-radius: 14px;
}
/* This project has no global `box-sizing`, so everything this renewal
introduces declares its own - scoped to those elements, because
changing it site-wide would move every existing block on every page.
Without it a `width: 100%` block with a gutter is wider than the
window, which is exactly how the closing banner first overflowed. */
.techm, .techm *,
.techf, .techf *,
.techc__nav, .techc__nav *,
.techc__zoom, .techc__zoom * {
box-sizing: border-box;
}
/* Anything the phone does not show. `data-techm` is the opposite marker -
see the bottom of this file. */
.tech_certification > h1,
.tech_certification > p:not([data-techm]) {
display: none;
}
/* ======================================================================
1. THE HERO
====================================================================== */
/* The section is the first screen: `height: 100%` of a body that is
`height: 100%` is the LAYOUT viewport, which does not move when the
browser's address bar slides away - a hero measured in `svh`/`dvh`
would resize under the reader on every flick. `min-height` rather than
`height` so a short screen grows instead of clipping the stack. */
.tech_top {
position: relative;
/* A stacking context of its own, at 0. Without it the hero's inner
layers (the body at 2, the breadcrumb at 3) are compared against
`.gnb` at 1 in the ROOT context - and the title and the figure
painted straight over the fixed header on the way past it.
Isolated, everything inside is ordered among itself and the whole
hero stays under the header. */
z-index: 0;
isolation: isolate;
display: flex;
flex-direction: column;
height: auto;
min-height: 100%;
overflow: hidden;
/* The desktop hero's photograph is not fetched on a phone: a
background declared inside a media query is only loaded when that
query matches, and the phone has its own picture below. */
background-image: none;
background-color: var(--tm-ink);
}
/* An empty 100%-tall div in a flex column is a whole screen of nothing. */
.tech_top .back {
display: none;
}
/* The two blocks the wide window uses and the phone replaces. */
.tech_top .text,
.tech_top .check {
display: none;
}
.tech_top .page_flow {
z-index: 3;
}
.tech_top .techm {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 0;
/* The bottom inset is the assistant's band, not a margin taste. Its
launcher is fixed 14px off the bottom and 59px tall at every
supported size, so anything below 83px is under it - and the
figure is nearly the full width, so it cannot simply sit beside
it the way the caption does. 96px puts the last line 13px clear.
Measured at 360, 390 and 430; see the AI-overlap check. */
padding: 0 var(--tm-gutter) calc(96px + env(safe-area-inset-bottom));
}
/* The picture. An element rather than a background because it is this
page's largest paint: as an element it is fetched at high priority and
it has a box from the first frame, so nothing under it moves when it
lands.
60% across, not centred: the subject sits right of middle in the file
and the crop is by width at every supported size (the frame is taller
than 9:16, so `cover` fits the height). At 360, 390 and 430 alike this
keeps the whole face between 11% and 93% of the frame. */
.tech_top .techm__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% center;
}
/* Two soft washes, no edge and no plate anywhere.
The one at the top is what keeps the shared header and the breadcrumb
legible: this photograph is bright at the top - a white curtain in full
sun - and the header's own type is white. It is the page's own
treatment rather than a change to the header component.
The one at the bottom carries the words. It reaches 72% of the way up
and every stop between is interpolated, so there is no line to see. */
.tech_top .techm__scrim {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to bottom,
rgba(8, 6, 12, 0.74) 0,
rgba(8, 6, 12, 0.34) 96px,
rgba(8, 6, 12, 0) 196px),
linear-gradient(to top,
rgba(8, 6, 12, 0.95) 0,
rgba(8, 6, 12, 0.88) 16%,
rgba(8, 6, 12, 0.60) 34%,
rgba(8, 6, 12, 0.24) 52%,
rgba(8, 6, 12, 0.06) 64%,
rgba(8, 6, 12, 0) 72%);
}
.tech_top .techm__body {
position: relative;
z-index: 2;
text-align: left;
color: var(--tm-fg);
}
.tech_top .techm__title {
margin: 0;
font-family: 'Paperozi', 'GmarketSans', sans-serif;
font-weight: 800;
font-size: clamp(29px, 8.6vw, 38px);
line-height: 1.22;
letter-spacing: -0.022em;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
/* the one phrase the composition leans on */
.tech_top .techm__title b {
font-weight: inherit;
color: var(--tm-accent);
}
/* The small English line. Tracked and uppercase, as in the reference;
the copy is the page's own and it is allowed to take the two lines it
takes. */
.tech_top .techm__script {
margin: 12px 0 0;
/* Wide enough for BETTER TOMORROW to hold one line and narrow enough
that the comma still breaks the sentence in two, which is the
two-line block the composition is built around. */
max-width: 17.5em;
font-size: clamp(10px, 2.9vw, 12px);
font-weight: 600;
line-height: 1.6;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.70);
}
/* The Korean page carries no English except the red markers above each
technology and the two engine lines, which are names. This line is a
sentence, so it is the English page's alone. */
html[lang="ko"] .tech_top .techm__script {
display: none;
}
/* ...and with that line gone the figure would sit straight under the
title, so it takes the air the line used to hold. */
html[lang="ko"] .tech_top .techm__figure {
margin-top: 20px;
}
/* ---- the figure -------------------------------------------------------
Light figures with a thin accent outline and a local halo - the
treatment is on the digits themselves, and there is no frame, no
housing and no flap anywhere near it.
It has to hold eleven digits and three separators on one line at 360.
The vw term is what caps it: at 360 the line measures about 280px
inside 324px of usable width, so nothing is condensed and nothing
scrolls. Each digit also sits in a slot of one fixed width, measured
off the loaded font by the script (--techm-digit), so the line cannot
change width as the number climbs.
---------------------------------------------------------------------- */
.tech_top .techm__figure {
display: block;
margin: 14px 0 0;
white-space: nowrap;
}
.tech_top .techm__number {
font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: clamp(30px, 9.4vw, 42px);
line-height: 1.08;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: #fff;
-webkit-text-stroke: 0.8px rgba(255, 45, 110, 0.92);
text-shadow:
0 0 16px rgba(255, 45, 110, 0.50),
0 0 40px rgba(255, 45, 110, 0.22);
}
.tech_top .techm__number i {
font-style: normal;
display: inline-block;
}
.tech_top .techm__number i.techm__d {
width: var(--techm-digit, 0.62em);
text-align: center;
}
.tech_top .techm__caption {
margin: 10px 0 0;
font-size: clamp(12px, 3.4vw, 14px);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.01em;
color: var(--tm-muted);
}
/* ======================================================================
2. THE BODY - one column, and the two middle blocks swapped
The four technologies come before the Vision Engine block on a phone.
They are swapped with `order` rather than in the markup, because the
wide window's two-column float depends on the source order.
====================================================================== */
.tech_box {
display: flex;
flex-direction: column;
padding: 0;
background-color: var(--tm-ink);
text-align: left;
}
.tech_box .list { order: 1; }
.tech_box .youtube { order: 2; }
.tech_box .text { order: 3; }
.tech_box .list {
width: auto;
margin: 0;
}
/* ---- a technology ---------------------------------------------------
Marker, heading, paragraph, picture. The hairline between two of them
is the only separator on the page and it is the section's own line
colour - there is no card, no plate and no shadow. */
.tech_box .list ul {
display: block;
padding: 34px var(--tm-gutter) 36px;
border-top: 1px solid var(--tm-line);
}
.tech_box .list ul:first-child {
border-top: 0;
padding-top: 40px;
}
.tech_box .list li {
float: none;
width: 100%;
padding: 0;
text-align: left !important;
}
.tech_box .list li span {
display: block;
padding: 0;
opacity: 1;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tm-accent);
}
.tech_box .list li h1 {
padding: 0;
margin: 12px 0 0;
font-size: clamp(20px, 5.9vw, 26px);
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.022em;
color: var(--tm-fg);
}
.tech_box .list li p {
padding: 0;
margin: 10px 0 0;
font-size: clamp(13.5px, 3.8vw, 15.5px);
font-weight: 500;
line-height: 1.66;
color: var(--tm-muted);
word-break: keep-all;
}
/* The frame. Wide and moderate in height, as the reference has it - a
portrait render filling the screen is the thing this renewal replaces.
The box owns the ratio so the space is reserved before the file
arrives, and `cover` plus a per-block `object-position` is how each
crop is aimed; see each one below. */
.tech_box .list li > picture,
.tech_box .list li > img {
display: block;
width: 100%;
/* `height: auto` is load-bearing: the ![]()
carries the wide window's
620px in an attribute, which is a presentational hint that would
otherwise beat `aspect-ratio` and stretch the frame. */
height: auto;
margin: 20px 0 0;
/* Square, not 4:3. The wide frame was the right shape and too small
to carry these photographs - at 390 this is 350x350 rather than
350x263, a third more picture, and still nothing like the
full-screen portrait the renewal replaced. */
aspect-ratio: 1 / 1;
border-radius: var(--tm-radius);
border: 1px solid var(--tm-line);
overflow: hidden;
background-color: var(--tm-ink-2);
}
/* `aspect-ratio: auto` matters: the ![]()
carries the wide window's
370x620 in its attributes so that window has something to reserve, and
without this the phone would inherit that ratio instead of the frame's. */
.tech_box .list li > picture > img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
border-radius: 0;
border: 0;
margin: 0;
}
.tech_box .list li > img {
object-fit: cover;
}
/* Where each crop is aimed. The files are portrait and the frame is wide,
so `cover` fits the width and chooses a band of the height - these are
the bands, measured off the files themselves.
1 imaging: the eyes, the seam and the handle that is drawn INTO the
artwork. The two caption chips along the foot of the file fall
outside a wide frame; the block's own paragraph says what they say,
and nothing here redraws them as HTML.
2 3d & ar: the eye and the tracking box around it.
3 security: the shield and its lock - the existing asset, unchanged.
4 usability: both faces of the call, which sit high in the file. */
.tech_box .list ul:nth-of-type(1) picture > img { object-position: center 38%; }
.tech_box .list ul:nth-of-type(2) picture > img { object-position: center 46%; }
.tech_box .list ul:nth-of-type(3) li > img { object-position: center 40%; }
.tech_box .list ul:nth-of-type(4) picture > img { object-position: center 30%; }
/* ---- Vision Engine and the IP -----------------------------------------
The block keeps its video, its heading, its paragraph and their order.
What changes is only the typography: it joins the system above, and the
yellow it used to be set in becomes the page's one accent - carried by
the mark the heading already ends on rather than by the whole line. */
/* `margin: 0` is the whole fix here: common_mobile.css centres this block
with `margin: 0 auto`, and an auto margin on the cross axis of a flex
container cancels `align-self: stretch` - which collapsed the video to
its own content width the moment .tech_box became a column. Stretch
rather than `width: 100%`, because this project has no global
`box-sizing` and a 100%-wide block with a gutter is 40px too wide. */
.tech_box .youtube {
margin: 0;
align-self: stretch;
padding: 40px var(--tm-gutter) 0;
}
.tech_box .youtube .fullvod {
padding-top: 0;
border-radius: var(--tm-radius);
overflow: hidden;
border: 1px solid var(--tm-line);
}
.tech_box .youtube .fullvod iframe {
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
border-radius: 0;
}
.tech_box .text {
padding: 24px var(--tm-gutter) 48px;
color: var(--tm-fg);
}
.tech_box .text h1 {
padding: 0;
margin: 0;
font-size: clamp(21px, 6.1vw, 27px);
font-weight: 800;
line-height: 1.34;
letter-spacing: -0.022em;
color: var(--tm-fg);
word-break: keep-all;
}
/* the exclamation the string already ends on, in the page's accent */
.tech_box .text h1 i {
font-style: normal;
color: var(--tm-accent);
}
.tech_box .text p {
margin: 14px 0 0;
font-size: clamp(13.5px, 3.8vw, 15.5px);
font-weight: 500;
line-height: 1.75;
color: var(--tm-muted);
word-break: keep-all;
}
/* ======================================================================
3. THE CERTIFICATES - one document at a time
====================================================================== */
.tech_certification {
width: auto;
margin: 0;
padding: 48px 0 52px;
background-color: var(--tm-ink);
text-align: left;
border-top: 1px solid var(--tm-line);
}
.tech_certification .techc__eyebrow {
margin: 0 var(--tm-gutter);
padding: 0;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tm-accent);
opacity: 1;
}
.tech_certification .techc__title {
margin: 12px var(--tm-gutter) 0;
font-size: clamp(21px, 6.1vw, 27px);
font-weight: 800;
line-height: 1.32;
letter-spacing: -0.022em;
color: var(--tm-fg);
word-break: keep-all;
}
/* ---- the strip --------------------------------------------------------
A scroll-snap strip, not a transform carousel: the browser owns the
gesture, so a horizontal drag pans the strip, a vertical one scrolls
the page, and neither can steal the other. That is also why there is
no touch handler over it at all.
Full-bleed, with the padding that centres the first and last document
built from the same measure - so every card stops dead centre and its
neighbours show at both edges throughout.
---------------------------------------------------------------------- */
.tech_certification .photo {
--tm-cert-w: min(68vw, 300px);
position: relative;
padding: 26px 0 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.tech_certification .photo::-webkit-scrollbar {
display: none;
}
.tech_certification .photo .swiper-wrapper {
display: flex;
gap: 14px;
padding: 0 calc((100% - var(--tm-cert-w)) / 2);
width: max-content;
}
.tech_certification .photo .swiper-slide {
flex: 0 0 var(--tm-cert-w);
width: var(--tm-cert-w);
scroll-snap-align: center;
scroll-snap-stop: always;
}
/* The document's own proportions, declared - so the row cannot change
height between slides and nothing is cropped to fill a box. */
.tech_certification .photo .swiper-slide img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 550 / 731;
object-fit: contain;
border-radius: 10px;
border: 1px solid var(--tm-line);
background-color: #fff;
cursor: zoom-in;
transition: opacity 260ms ease, transform 260ms ease;
}
/* The documents are controls on a phone (see the script), so they take
focus - and the ring they take it with is the page's, not the browser's
default yellow. It is what the reader sees when the enlarged view hands
focus back to the document it was opened from. */
.tech_certification .photo .swiper-slide img:focus-visible {
outline: 2px solid var(--tm-accent);
outline-offset: 3px;
}
/* The two beside the active one step back a little - enough to say which
one is being read, not enough to be an effect. */
.tech_certification .photo .swiper-slide:not(.is-active) img {
opacity: 0.45;
transform: scale(0.955);
}
/* Left-aligned, with the page's own gutter: the assistant's launcher is
right-anchored and about 160px wide at every supported size, and a
centred row of dots ran straight under it. */
.tech_certification .techc__nav {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
margin: 20px var(--tm-gutter) 0;
padding-right: 170px;
}
.tech_certification .techc__dots {
display: flex;
align-items: center;
gap: 7px;
}
.tech_certification .techc__dot {
width: 6px;
height: 6px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.26);
transition: background 220ms ease, width 220ms ease;
cursor: pointer;
}
.tech_certification .techc__dot.is-active {
width: 18px;
border-radius: 3px;
background: var(--tm-accent);
}
.tech_certification .techc__count {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.45);
}
/* ---- the enlarged view ------------------------------------------------
A native