/* ═══════════════════════════════════════════════════════════════════
Quick Connect — design layer, pilot
A preview only: nothing on the server is touched. It is injected into a
saved copy of the page so the same page can be seen both ways.
The method is one layer, not a rewrite. The site already defines 33 design
tokens and uses them 1,109 times, so redefining the tokens re-skins most of
the page at once; the rules after them are the places the tokens cannot
reach - a typeface, a button shape, a shadow written by hand.
The palette is Apple's own public one: #1d1d1f for text, #f5f5f7 for the
quiet grey, #0071e3 for the one accent. The typeface is the system stack,
which IS San Francisco on Apple devices and Segoe UI on Windows - the
honest way to have it, since SF Pro cannot be served from a website.
═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
/* ── the one accent ─────────────────────────────────────────── */
--c: #0071e3;
--c2: #0077ed;
--c3: #0058b0;
--accent: #0071e3;
--cisco-blue: #0071e3;
/* ── paper and ink ──────────────────────────────────────────── */
--bg: #ffffff;
--bg1: #fbfbfd;
--bg2: #f5f5f7;
--bg3: #f5f5f7;
--bg4: #e8e8ed;
--bg5: #d2d2d7;
--card: #ffffff;
--card2: #f5f5f7;
--cisco-dark: #ffffff;
--tw: #1d1d1f; /* headings */
--t: #1d1d1f; /* body */
--tm: #6e6e73; /* secondary */
--text: #1d1d1f;
--muted: #6e6e73;
--muted2: #1d1d1f;
--white: #1d1d1f; /* an alias the old theme used for "strongest text" */
/* ── used sparingly, never as decoration ────────────────────── */
--o: #bf4800;
--o2: #c2410c;
--g: #1d9e55;
--red: #d70015;
/* ── hairlines, not glows ───────────────────────────────────── */
--bdr: rgba(0,0,0,.09);
--bdr2: rgba(0,0,0,.13);
--bdr3: rgba(0,113,227,.35);
--border: rgba(0,0,0,.09);
--border2: rgba(0,0,0,.13);
/* ── Apple's radii: soft, never pill-less, never sharp ──────── */
--r: 12px;
--r2: 18px;
--r3: 24px;
--radius: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
/* ── shadows you have to look for ───────────────────────────── */
--shadow: 0 1px 3px rgba(0,0,0,.06);
--shadow-lg: 0 8px 30px rgba(0,0,0,.08);
/* Inter (already loaded by the layout) comes before Segoe UI: on Windows it
is the nearest thing to SF Pro; on a Mac the system font still wins. */
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ── the typeface ───────────────────────────────────────────────────
Orbitron and Exo 2 are what make the site read as a games console. The
system stack is what makes it read as Apple. Icon fonts are put back
straight afterwards, or every icon becomes a letter. */
body, button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6, p, a, span, div, li, td, th, label, strong, em, small, blockquote {
font-family: var(--font-sans) !important;
}
.fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-brands, .fa-light,
[class^="fa-"], [class*=" fa-"] {
font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
"Font Awesome 5 Free", "Font Awesome 5 Brands", FontAwesome !important;
}
code, pre, kbd, samp, .mono {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
}
/* Apple sets display type large, heavy and tight, and body type calm. */
h1 { letter-spacing: -.035em; font-weight: 700; line-height: 1.07; }
h2 { letter-spacing: -.028em; font-weight: 700; line-height: 1.12; }
h3, h4 { letter-spacing: -.02em; font-weight: 600; }
p, li { letter-spacing: -.004em; }
body { -webkit-font-smoothing: antialiased; color: var(--t); background: var(--bg); }
/* Nothing shouts in capitals. */
.nbtn, .btn, .hbtn, .badge, .pill, .eyebrow, .sec-hdr span, .tag {
text-transform: none !important;
letter-spacing: -.01em !important;
}
/* ── buttons: the pill ──────────────────────────────────────────── */
.nbtn, .btn, .hbtn, button.btn, .pricing-btn, .enrollment-cta, .quiz-submit-button {
border-radius: 980px !important;
font-weight: 500 !important;
box-shadow: none !important;
transition: background-color .22s ease, color .22s ease, border-color .22s ease !important;
}
.nbtn { padding: 8px 18px !important; height: 38px !important; font-size: .88rem !important; }
.nbtn.solid, .btn-primary, .hbtn.primary {
background: var(--c) !important; border-color: var(--c) !important; color: #fff !important;
}
.nbtn.solid:hover, .btn-primary:hover, .hbtn.primary:hover {
background: var(--c2) !important; border-color: var(--c2) !important;
}
.nbtn:not(.solid) { border-color: var(--bdr2) !important; color: var(--c) !important; }
.nbtn:not(.solid):hover { background: var(--bg2) !important; }
/* ── surfaces: a hairline and a soft corner, nothing else ───────── */
/* The exam pages (.quiz-question, .ex-policy) are deliberately left out: their
look was tuned question by question and is not this layer's business. */
.card, .course-card, .lesson-card, .stat-card, .award-card, .feature-card,
.panel, .box, .testimonial-card {
background: var(--card) !important;
border: 1px solid var(--bdr) !important;
border-radius: var(--r2) !important;
box-shadow: none !important;
}
.card:hover, .course-card:hover, .award-card:hover, .feature-card:hover {
border-color: var(--bdr2) !important;
box-shadow: var(--shadow-lg) !important;
transform: none !important;
}
/* ── the bar: Apple's translucent hairline ──────────────────────── */
#nav, .navbar {
background: rgba(255,255,255,.72) !important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--bdr) !important;
box-shadow: none !important;
}
.nav-links a, .nav-inner a { color: var(--t) !important; font-weight: 400 !important; }
.nav-links a:hover { color: #000 !important; }
/* ── no neon anywhere ───────────────────────────────────────────── */
* { text-shadow: none !important; }
.hero-h1 .line2, .hero-h1 .line3 {
-webkit-text-fill-color: initial !important;
background: none !important;
}
.hero-h1 .line2 { color: var(--c) !important; }
.hero-h1 .line3 { color: var(--tm) !important; }
/* ── space, which is most of the look ───────────────────────────── */
section, .section { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.sec-hdr { margin-bottom: 2.5rem !important; }
/* Seen whole for the comparison: the page reveals these on scroll, and a
screenshot never scrolls. Applied to both sides equally. */
.reveal { opacity: 1 !important; transform: none !important; }
/* ═══════════════════════════════════════════════════════════════════
Second pass: the parts the tokens cannot reach.
The page writes these by hand - gradients, uppercase, a 12px lift on
hover, a cyan glow - so each is answered by name. Everything here is
cosmetic: no element is moved, hidden or resized in a way that changes
what can be clicked.
═══════════════════════════════════════════════════════════════════ */
/* ── the page header band ───────────────────────────────────────── */
.courses-page-header {
background: var(--bg2) !important;
border-bottom: 1px solid var(--bdr) !important;
padding: 4rem 0 3.25rem !important;
}
.courses-page-header h1 { font-size: 3rem !important; color: var(--tw) !important; }
.courses-page-header p { color: var(--tm) !important; font-size: 1.1rem !important; }
.courses-page-header .eyebrow, .courses-page-header > div > span {
color: var(--c) !important; font-weight: 500 !important;
}
/* ── search ─────────────────────────────────────────────────────── */
.search-input {
border-radius: 980px !important;
border: 1px solid var(--bdr2) !important;
background: var(--bg) !important;
padding: 12px 18px 12px 44px !important;
font-size: .95rem !important;
box-shadow: none !important;
}
.search-input:focus {
border-color: var(--c) !important;
box-shadow: 0 0 0 4px rgba(0,113,227,.12) !important;
outline: none !important;
}
.search-icon { color: var(--tm) !important; }
/* ── the filter pills: Apple's segmented look ───────────────────── */
.filter-pill {
border-radius: 980px !important;
border: 1px solid var(--bdr2) !important;
background: transparent !important;
color: var(--t) !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: -.01em !important;
padding: 7px 16px !important;
box-shadow: none !important;
}
.filter-pill:hover { background: var(--bg2) !important; }
.filter-pill.active {
background: #1d1d1f !important;
border-color: #1d1d1f !important;
color: #fff !important;
}
/* ── the card ───────────────────────────────────────────────────── */
.course-card {
border: 1px solid var(--bdr) !important;
border-radius: 18px !important;
background: var(--card) !important;
box-shadow: none !important;
transition: border-color .25s ease, box-shadow .25s ease !important;
}
.course-card:hover {
transform: none !important; /* no 6px jump */
border-color: var(--bdr2) !important;
box-shadow: 0 10px 30px rgba(0,0,0,.07) !important;
}
.course-image {
background: var(--bg2) !important; /* not a cyan gradient */
border-bottom: 1px solid var(--bdr) !important;
height: 190px !important;
}
.course-image img { background: var(--bg2) !important; }
.course-body { padding: 1.4rem 1.4rem 1.5rem !important; }
.course-title {
font-size: 1.06rem !important; font-weight: 600 !important;
letter-spacing: -.02em !important; color: var(--tw) !important; line-height: 1.3 !important;
}
.course-desc { color: var(--tm) !important; font-size: .92rem !important; line-height: 1.5 !important; }
.course-meta-row { border-top: 1px solid var(--bdr) !important; color: var(--tm) !important; }
.course-meta-item { color: var(--tm) !important; font-size: .85rem !important; }
.course-meta-item i { color: var(--tm) !important; }
.course-rating .stars { color: #b25000 !important; font-weight: 600 !important; }
/* The badge: a quiet label, not a flag. */
.course-badge, .course-badge.new {
background: rgba(0,0,0,.65) !important;
color: #fff !important;
border: 0 !important;
border-radius: 980px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: -.01em !important;
padding: 4px 11px !important;
font-size: .74rem !important;
backdrop-filter: blur(6px);
}
/* The card's own call to action: Apple keeps it a pill, not a slab. */
.course-action-btn, .btn.btn-c, .btn-full {
background: var(--c) !important;
border: 0 !important;
border-radius: 980px !important;
color: #fff !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: -.01em !important;
padding: 11px 20px !important;
box-shadow: none !important;
}
.course-action-btn:hover, .btn.btn-c:hover { background: var(--c2) !important; }
/* ── the footer ─────────────────────────────────────────────────── */
#site-footer { background: var(--bg2) !important; border-top: 1px solid var(--bdr) !important; }
#site-footer a { color: var(--tm) !important; }
#site-footer a:hover { color: var(--t) !important; }
.soc-btn {
background: var(--bg) !important;
border: 1px solid var(--bdr) !important;
border-radius: 50% !important;
box-shadow: none !important;
}
.soc-btn:hover { border-color: var(--bdr2) !important; background: var(--bg) !important; }
/* ── the bar: which page you are on ─────────────────────────────────
The rule above set every link to one colour and one weight, which
silenced the current-page marker the layout already had - my own doing.
This gives it back, the way Apple marks a current item: the inactive ones
step back to grey, the one you are on comes forward to near-black on a
quiet pill. No gradient underline, no glow.
The class is put on by the layout's own script, by path. */
.nav-links a.nav-link {
color: var(--tm) !important;
font-weight: 400 !important;
border-radius: 980px;
padding: 7px 13px;
transition: color .2s ease, background-color .2s ease;
}
.nav-links a.nav-link:hover {
color: var(--tw) !important;
background: var(--bg2);
}
.nav-links a.nav-link.active {
color: var(--tw) !important;
font-weight: 500 !important;
background: var(--bg2);
}
/* The pill is the marker; the old 2px gradient bar under it would be a
second one saying the same thing. */
.nav-links a.nav-link.active::after { display: none !important; }
/* The icon travels with its label rather than staying blue on its own. */
.nav-links a.nav-link i { color: inherit !important; opacity: .85; }
/* ── the bar fits on one line, signed in or out ─────────────────────
Signed in there are eight links, not four, and the bar was already
wrapping before this layer existed: the logo broke onto three lines and
"My Learning" and "Live Quiz" onto two. The bar is given the width it
needs, the gap is tightened, and nothing in it is allowed to wrap.
Between the phone breakpoint and a laptop the icons stand down - the
words carry the meaning on their own. */
.nav-inner {
max-width: 1480px !important;
gap: 1rem;
}
.logo { flex: 0 0 auto; }
.logo-text, .logo-sub { white-space: nowrap !important; }
.nav-links {
/* Space, not dividers. Apple never draws a line between nav items; what
separates them is air. The air has to be rationed though - eight links
when signed in - so it grows with the window: about 17px of gap at
1920, 8px at 1366, almost none by the time the phone menu takes over.
With the 11px of padding each link carries, that reads as a comfortable
38px between labels on a wide screen. */
gap: clamp(2px, 1.6vw - 14px, 18px) !important;
flex-wrap: nowrap !important;
}
.nav-links a.nav-link {
white-space: nowrap !important;
padding: 7px 11px;
font-size: .92rem;
}
.nav-right { flex: 0 0 auto; }
@media (max-width: 1400px) {
.nav-links a.nav-link { padding: 6px 9px; font-size: .875rem; }
.nav-links a.nav-link i { display: none; }
.nav-inner { gap: .5rem; }
}
/* ── the course artwork belongs to the band, not on top of it ───────
The real cause was in the artwork, not the stylesheet: the SVG carried
`` - a solid ground - so
whatever was done in CSS, a rectangle was being drawn. Two attempts at
hiding it (multiply, then matching the band's colour to it) treated the
symptom; the ground has now been taken out of both course files, which
are kept beside them as .ground.bak.
With nothing behind it, the drawing can be seen properly: it is carried at
full strength and only its leading edge is softened so it does not start
abruptly beside the title. */
.course-hero-image {
/* form-fields.css inverts this image - `filter: invert(1) hue-rotate(180deg)`
- because the artwork used to carry a navy plate that had to be flipped
for a pale page. The plate is gone now, so inverting turns a light
drawing into a black one, which is the black backdrop that appeared.
The art is already the light variant; it needs no flipping. */
filter: none !important;
opacity: .85 !important;
width: 46% !important;
-webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
/* The band: Apple's quiet grey.
Written as literal colours, not tokens. The page redefines --bg and --bg2
further down - after this stylesheet - so a token here can resolve to the
dark theme's value and paint the band near-black. That is exactly what happened:
the band went to rgb(38,41,43) and looked like a black backdrop behind the
artwork. These two greys are the light design's own, and nothing can
reinterpret them. */
.course-hero-pro {
background: linear-gradient(180deg, #f5f5f7, #ffffff) !important;
border-bottom: 1px solid rgba(0,0,0,.09) !important;
}
/* ═══════════════════════════════════════════════════════════════════
THE PHONE: the lesson view, read like an app
What it does on a phone today, and why each of these is here:
* the lesson lives in a box of its own with `height: calc(100vh - 70px)`
and `overflow-y: auto`, so the phone scrolls a small window inside a
page that does not scroll - two scrollbars, and the footer sitting
right under a cramped porthole. A phone should scroll the page.
* the tab row runs off the right edge: "Progress" is simply unreachable.
* the language capsule floats over the text.
Everything here is inside the phone breakpoint; nothing changes on a
laptop. 820px is the width at which the curriculum rail already gives up
and becomes a drawer.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* One page, one scroll.
The page itself has to be allowed to scroll first: html and body are
held to the window's height here, which is why window.scrollTo did
nothing while the document was 18,000px tall - the scrolling was
happening inside a box. Sideways overflow stays hidden. */
html, body {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: visible !important;
overflow-x: hidden !important;
position: static !important;
}
/* Why nothing would stay pinned.
premium-animations.css runs `animation: pageEnter ... forwards` on
#main-content. The last keyframe is transform: translateY(0), and
`forwards` keeps it - so the element carries a transform for ever
after. An ancestor with a transform becomes the containing block for
everything inside it: `position: fixed` stops meaning the screen and
`position: sticky` clamps to that box instead of the viewport. Measured
in Chrome: the language capsule, declared fixed, slid from top 153 to
top -547 while scrolling. It was never going to stay.
The second cause is on the same element: overflow-x: clip with
overflow-y: visible computes to a scroll container, which sticky then
clamps to as well.
Both are undone here, for phones only. The entrance fade is given up on
a phone; a header that stays where it is worth more than half a second
of movement. */
#main-content {
animation: none !important;
transform: none !important;
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
html.ex-fs #main-content,
#main-content,
.lesson-player-container,
.lesson-player-main {
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
.lesson-player-container { display: block !important; }
.lesson-content-area {
overflow: visible !important;
/* clear of the two fixed bars above it: 103px of lesson bar and 61px
of tabs, measured rather than guessed */
padding: 1.1rem 1rem 2rem !important;
margin-top: 117px !important; /* 56px of bar plus 61px of tabs */
max-width: none !important;
}
/* The lesson's own bar behaves like an app's: it stays at the top as
you read, with the lesson name beside the way back to the list. */
.lesson-nav-bar {
/* Fixed, not sticky. A sticky element only sticks inside its own
parent, and this bar's parent is a short wrapper - measured in
Chrome, it slid to top -565px at a scroll of 700. Fixed now works
because the transform that was breaking it has been removed. */
position: fixed !important; top: 70px !important; left: 0; right: 0; z-index: 40;
/* the bar carries a 60px top margin of its own, which pushed it below
the place it was pinned to - measured at rect.top 130 against a
declared top of 70 */
margin: 0 !important;
background: rgba(255,255,255,.92);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid rgba(0,0,0,.09);
padding: .4rem .9rem !important;
gap: .7rem;
min-height: 56px;
height: 56px;
}
.sidebar-toggle-btn {
border-radius: 980px !important;
padding: 8px 14px !important;
min-height: 40px;
font-weight: 500 !important;
}
.lesson-nav-current {
font-weight: 600; letter-spacing: -.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The tabs scroll sideways instead of being cut off, and snap like a
segmented control. The scrollbar itself is hidden - on a phone the
movement is the affordance. */
.lesson-tabs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: .25rem;
padding: .5rem .75rem !important;
position: fixed !important; left: 0; right: 0; top: 126px !important; z-index: 39;
background: rgba(255,255,255,.92);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid rgba(0,0,0,.07);
}
.lesson-tabs::-webkit-scrollbar { display: none; }
.lesson-tab {
flex: 0 0 auto !important;
scroll-snap-align: start;
white-space: nowrap;
border: 0 !important;
border-radius: 980px !important;
padding: 8px 14px !important;
min-height: 40px;
font-size: .9rem !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: -.01em !important;
color: #6e6e73 !important;
background: transparent !important;
}
.lesson-tab.active {
background: #1d1d1f !important;
color: #fff !important;
}
.lesson-tab.active::after { display: none !important; }
/* ── the header that gets out of the way ──────────────────────────
Scrolling down takes the site's bar away and leaves the lesson's own
bar and its tabs at the very top; scrolling up brings it back. The
class is set by design-apple.js; everything that moves is here.
The three things that must agree on where the top is:
bar visible -> lesson bar at 70px, tabs at 122px
bar away -> lesson bar at 0, tabs at 52px */
#nav {
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
html.nav-away #nav { transform: translateY(-100%); }
.lesson-nav-bar {
transition: top .3s cubic-bezier(.4, 0, .2, 1);
/* room at the right for the language capsule, so a long lesson
title never runs underneath it */
padding-right: 60px !important; /* one 48px circle, plus a little air */
}
.lesson-tabs { transition: top .3s cubic-bezier(.4, 0, .2, 1); }
html.nav-away .lesson-nav-bar { top: 0 !important; }
html.nav-away .lesson-tabs { top: 56px !important; }
/* ── the language capsule, at the top where it is asked for ───────
At the right-hand end of the lesson bar: in reach of a thumb, never
over the words, and it travels with the bar when the header leaves. */
.lang-toggle {
top: 74px !important; /* centred: the bar starts at 70 and is 56 tall */
bottom: auto !important;
right: 8px !important;
left: auto !important;
/* One control, not two. Standing the pair upright freed the title but
cost 96px of height, and the bar had to be tall enough to hold it.
So on a phone only the language you are NOT reading in is shown:
one 44px circle that says what tapping it will do. 48x48 instead of
50x96 - and the bar can come down with it. */
flex-direction: row !important;
padding: 2px !important;
gap: 0 !important;
border-radius: 50% !important;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
transition: top .3s cubic-bezier(.4, 0, .2, 1);
z-index: 41;
}
html.nav-away .lang-toggle { top: 4px !important; } /* still centred when the bar rises */
/* The language you are already reading in is not an option worth
showing; the other one is the whole control. The site marks the
current one with .active, so that is the one that stands down. */
.lang-toggle .lang-btn.active { display: none !important; }
/* One circle, not a square inside one. Measured: the wrapper was a 50px
circle with a pale blue fill and a border, and the button inside it a
44px rounded SQUARE (radius 8px) with a shadow of its own - which is
the box you could see behind the circle.
So the wrapper stops drawing anything and the button becomes the
control: a 44px circle, white, one hairline, one soft shadow. */
.lang-toggle {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
width: 44px !important;
height: 44px !important;
}
.lang-toggle .lang-btn {
border-radius: 50% !important;
background: #ffffff !important;
border: 1px solid rgba(0,0,0,.10) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.10) !important;
color: #1d1d1f !important;
font-size: .76rem !important;
font-weight: 600 !important;
}
.lang-toggle .lang-btn:active { background: #f5f5f7 !important; }
/* Someone who has asked for less movement gets none of it. */
@media (prefers-reduced-motion: reduce) {
#nav, .lesson-nav-bar, .lesson-tabs, .lang-toggle { transition: none !important; }
}
/* Room to read, and targets a thumb can hit. */
.quiz-question { padding: 1.1rem !important; }
.quiz-option-label { min-height: 48px; align-items: center; }
.btn, .nbtn, .course-action-btn, .quiz-submit-button { min-height: 46px; }
}
/* ── the curriculum rail on a phone ─────────────────────────────────
The desktop list is left exactly as it was designed: 8.8px of padding and
a 4.8px margin, a 41px pitch. An earlier version of this tightened it by
mistake - the rule was written without a breakpoint - and that is undone.
The phone is the one that needed it. Measured in the open drawer: 44px
rows with a 14px margin under each, a pitch of 59px, fourteen rows on an
844px screen. The 14px comes from mobile-fixes.css:
[class*="item"]:not(.faq-toggle) { margin-bottom: 14px !important; }
which matches every lesson row and sits later in the cascade, so it beat
two earlier attempts written as plain `.lesson-item`. Hence the longer
selector here.
Rows are 38px now with a 2px margin - a 40px pitch, twenty-one rows on a
screen. Still a full-width target, which is what makes 38px safe to tap
where a 38px button would not be. */
@media (max-width: 820px) {
.curriculum-rail .lesson-item,
.lesson-sidebar .lesson-item {
/* A blanket rule gives every a 44px floor for touch. These rows
are full-width targets, so 38px is still comfortable - but the
floor carries !important, so this has to as well. */
min-height: 38px !important;
display: flex;
align-items: center;
padding-top: 3px !important;
padding-bottom: 3px !important;
margin-bottom: 2px !important;
line-height: 1.25 !important;
font-size: .875rem !important;
}
.curriculum-rail .lesson-item.lq-sub,
.lesson-sidebar .lesson-item.lq-sub {
padding-left: 32px !important;
min-height: 34px !important;
font-size: .84rem !important;
}
/* the rail's own heading block gives back some room too */
.lesson-sidebar .sidebar-header { padding-bottom: .5rem !important; }
.lesson-sidebar .sidebar-instruction,
.lesson-sidebar .sidebar-subtitle { margin-bottom: .35rem !important; }
}
/* ═══════════════════════════════════════════════════════════════════
THE PHONE, second pass: the three things that still read badly
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* ── room to write in ─────────────────────────────────────────────
The lesson card keeps desktop padding on a phone: 32px top and bottom
and 40px each side, inside a container that adds 16 more. On a 390px
screen that leaves the text about 246px - which is why it read as a
narrow, broken column. These are the paddings a phone can afford. */
.lesson-header { padding: 20px 16px !important; }
.lesson-container { padding: 16px 12px !important; }
.lesson-body, .lesson-lang, .tab-content { padding-left: 0 !important; padding-right: 0 !important; }
.module, .learning-objectives { padding: 16px 14px !important; }
/* A lesson picture is drawn 760px wide; on a phone it was 300px. It may
use the card's 14px side padding (the card clips at its border), so it
is 328px - the most it can be. Its own inline margin is not !important. */
.module .lesson-figure { margin-left: -14px !important; margin-right: -14px !important; }
/* ── the lesson's facts ───────────────────────────────────────────
The markup is "📚 Chapter: 3 — Networking Fundamentals"
inside a flex row with an 8px gap, so the emoji, the label and the
value became three flex items that wrapped against each other - the
label ended up UNDER its own icon and beside the value. Measured at
246px wide in a 390px screen.
As ordinary text it simply reads: icon, label in grey, value in black,
wrapping like a sentence. One fact per line. */
.lesson-meta {
display: block !important;
margin-top: .35rem;
}
.lesson-meta .meta-item {
display: block !important;
width: auto !important;
color: #6e6e73 !important;
font-size: .9rem !important;
line-height: 1.55 !important;
padding: 5px 0 !important;
border-bottom: 1px solid rgba(0,0,0,.055);
}
.lesson-meta .meta-item:last-child { border-bottom: 0; }
.lesson-meta .meta-item strong {
color: #1d1d1f !important;
font-weight: 600 !important;
}
/* ── the tabs: all four, no cut ───────────────────────────────────
Measured: the four came to 379px of label inside a 390px row whose
own padding took 24 more - so "Progress" fell off the edge by a few
pixels. Trimming the padding inside each tab buys back 32px, which is
more than enough for them to sit side by side without scrolling. */
.lesson-tabs {
padding-left: .4rem !important;
padding-right: .4rem !important;
gap: .1rem;
justify-content: space-between;
}
.lesson-tab {
padding: 8px 9px !important;
font-size: .845rem !important;
}
.lesson-tab i { display: none; } /* the words are the labels */
/* ── the drawer reads like the bar on a laptop ────────────────────
Same language as the navigation bar: grey when resting, near-black
on a quiet pill when it is the page you are on. */
.mob-nav {
background: rgba(255,255,255,.96) !important;
-webkit-backdrop-filter: saturate(180%) blur(18px);
backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid rgba(0,0,0,.09) !important;
padding: .5rem .6rem !important;
}
#mob-nav a,
.mob-nav a {
display: flex !important;
align-items: center;
gap: .7rem;
min-height: 46px;
padding: 0 .9rem !important;
margin: 2px 0;
border-radius: 12px !important;
color: #6e6e73 !important;
font-weight: 500 !important;
font-size: .95rem !important;
letter-spacing: -.01em;
border: 0 !important;
/* the drawer shouted in capitals; the bar on a laptop does not */
text-transform: none !important;
}
#mob-nav a:hover, #mob-nav a:active, .mob-nav a:hover, .mob-nav a:active { background: #f5f5f7 !important; color: #1d1d1f !important; }
#mob-nav a.active, .mob-nav a.active {
background: #f5f5f7 !important;
color: #1d1d1f !important;
font-weight: 600 !important;
}
/* The SIM fold-out: its two links were centred by the drawer's own rule
while the two "soon" rows beside them were not. One left edge for all
four, indented a step under their parent. */
#mob-nav .mob-sim a,
#mob-nav .mob-sim .soon {
justify-content: flex-start !important;
text-align: left !important;
padding: 0 .9rem 0 2.2rem !important;
min-height: 44px;
font-size: .93rem !important;
}
#mob-nav .mob-sim .soon { color: #a1a1a6; }
#mob-nav .mob-sim .soon em { margin-left: auto; background: #f0f0f2; color: #6e6e73; }
#mob-nav a i, .mob-nav a i {
width: 20px; text-align: center; opacity: .55;
color: inherit !important; /* the icon follows its label, as on the bar */
}
}
/* ═══════════════════════════════════════════════════════════════════
The main pages, read on a phone
Found by walking /courses, /about, /contact and /login at 390px in
Chrome and asking each page about its own headings and buttons:
/courses h1 at 48px - a third of the screen's width per word
/contact .form-submit in capitals with wide tracking
/login the SIGN IN / REGISTER tabs, the same
everywhere the floating help button, a teal gradient that belongs to
no other part of the design
None of these appear on the home page, which is left alone.
═══════════════════════════════════════════════════════════════════ */
/* The help bubble: one accent colour, no gradient. It is the only round
button that floats over everything, so it should be the calmest thing on
the screen, not the loudest. */
/* Written as html[data-theme] #chat-btn: the sheet that paints it uses
[data-theme="light"] #chat-btn !important, which outranks a plain
#chat-btn however many !importants it carries. Chrome's matched-rule list
named the winner. */
html[data-theme] #chat-btn,
html #chat-btn,
#chat-btn {
background: #0071e3 !important;
background-image: none !important;
box-shadow: 0 6px 20px rgba(0,0,0,.18) !important;
border: 0 !important;
}
html[data-theme] #chat-btn:hover, #chat-btn:hover { background: #0077ed !important; }
/* Form and tab buttons speak in sentence case like everything else. */
.form-submit, .m-tab, .auth-tab, .tab-btn {
text-transform: none !important;
letter-spacing: -.01em !important;
}
.form-submit {
border-radius: 980px !important;
font-weight: 500 !important;
box-shadow: none !important;
}
.m-tab, .auth-tab {
border-radius: 980px !important;
font-weight: 500 !important;
}
@media (max-width: 820px) {
/* A 48px headline on a 390px screen leaves room for two words a line.
Apple sets display type large on a phone too, but not that large:
this scales with the screen and stops at 30px. */
.courses-page-header h1,
.page-title,
.sec-h2,
main h1 {
font-size: clamp(1.6rem, 6.4vw, 1.9rem) !important;
line-height: 1.12 !important;
letter-spacing: -.03em !important;
}
/* 16px of gutter: my own earlier rule wrote `padding: 2.25rem 0` and
pushed the heading flat against the left edge of the screen. */
.courses-page-header { padding: 2.25rem 1rem 1.75rem !important; }
.courses-page-header .header-content { padding: 0 !important; }
.courses-page-header p { font-size: .97rem !important; }
/* Anything that is a button on a phone is at least a thumb tall. */
.form-submit, .m-tab, .auth-tab { min-height: 46px; }
}
/* ── Contact, About and Profile: the same margins as everywhere else ──
Measured on a phone, where each page's text actually began:
/courses title 16px from the edge (the one to match)
/contact title 14, card text 35, the benefits block 47
/about title 14, section text 47
/profile title 24
The cause in every case is desktop padding carried onto a 390px screen:
.about-section and .contact-section at 32px, .connect-benefits-wrapper at
40/32, .course-hero-pro at 24. On a phone a card gives 16px, which puts
its text at 32 from the screen edge - the page gutter plus the card's own
- and the page title at 16. */
@media (max-width: 820px) {
.about-container,
.contact-container { padding-left: 16px !important; padding-right: 16px !important; }
/* Contact began at 60px under a bar that ends at 70 - its title was
sitting behind the navigation. About starts at 80 and Courses at 158,
so this is the one page that needed the clearance. */
.contact-container { padding-top: 28px !important; }
.about-header,
.contact-header { padding-left: 0 !important; padding-right: 0 !important; }
.about-section,
.contact-section,
.connect-benefits-wrapper,
.contact-wrapper > div,
.about-card,
.contact-card { padding: 18px 16px !important; }
.about-main { padding-bottom: 48px !important; }
/* the profile page is built on the course shell */
/* The profile/course hero sits INSIDE a container that already gives
16px, unlike the courses page where the band is full width. Its own
16 was being added on top, so the title started at 32 while every
other page starts at 16. The band keeps its vertical padding and
lets the container provide the gutter. */
.course-hero-pro { padding: 18px 0 !important; }
.course-hero-pro .course-hero-content { padding-left: 0 !important; padding-right: 0 !important; }
.course-container-pro { padding-left: 16px !important; padding-right: 16px !important; }
.course-tabs-pro { padding-left: 8px !important; padding-right: 8px !important; }
/* section headings on these pages are h2s inside cards: one size down,
so they read as headings and not as another title */
.about-section .section-title,
.contact-section .section-title,
.connect-benefits-wrapper .section-title { font-size: 1.15rem !important; letter-spacing: -.02em !important; }
}
/* ── Contact: the four cards, as rows ───────────────────────────────
Measured on a phone: each card was 358x220 with 25/22 of padding, the
icon stacked above the label and the label above the value. Four of them
came to 870px of scrolling for four facts, most of it air.
Laid out as a row instead - icon on the left, label and value stacked
beside it - each card is about a third of that, and all four are on one
screen. This is the shape a phone uses for a list of details. */
@media (max-width: 820px) {
.contact-grid-top {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.contact-quick-info {
display: grid !important;
grid-template-columns: 44px 1fr;
grid-template-areas: "icon title" "icon content";
align-items: center;
justify-items: start;
gap: 1px 14px !important;
padding: 12px 14px !important;
border-radius: 14px !important;
text-align: left !important;
min-height: 0 !important;
}
.contact-quick-info .quick-icon {
grid-area: icon;
width: 44px !important;
height: 44px !important;
min-width: 44px;
margin: 0 !important;
border-radius: 12px !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 1rem !important;
}
.contact-quick-info .quick-title {
grid-area: title;
align-self: end;
margin: 0 !important;
font-size: .72rem !important;
letter-spacing: .05em;
color: #6e6e73 !important;
}
.contact-quick-info .quick-content {
grid-area: content;
align-self: start;
margin: 0 !important;
line-height: 1.35;
}
.contact-quick-info .quick-content a {
font-size: .95rem !important;
font-weight: 500 !important;
}
.contact-quick-info .quick-content p {
margin: 1px 0 0 !important;
font-size: .76rem !important;
}
/* The WhatsApp card carries an "Online Now" badge as a sibling BEFORE
the icon, so in a two-column grid it fell into a row of its own and
made that card half as tall again (156px against 111). It gets a
column of its own, on the right, spanning both rows. */
.contact-quick-info:has(.live-chat-badge) {
grid-template-columns: 44px 1fr auto;
grid-template-areas: "icon title badge" "icon content badge";
}
.contact-quick-info .live-chat-badge {
grid-area: badge;
align-self: center;
justify-self: end;
margin: 0 !important;
white-space: nowrap;
padding: 4px 10px !important;
border-radius: 980px !important;
font-size: .7rem !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
}
}
/* ── About on a phone: who you are reading about, first ─────────────
The page is a two-column grid: the three long sections in , and an