@charset "UTF-8";
/* ==========================================================================
INDEX.CSS
ntabibian.com :: LANDING PAGE ONLY :: v2
--------------------------------------------------------------------------
WRITTEN : 2026-09-05
RENAMED : 2026-09-05, was Negar-Home.css in v1 of website
LOADS AFTER : Negar-Default.css (order matters, do not swap them)
USED BY : index.html, Contact.html, Coming.html, Error.html
Negar-Default.css stays the one file every page loads.
THE NAME LOST ITS TYPO. The site-wide file is Negar-DEFAULT.css now, not
Negar-Dafault.css. All four pages point at the new spelling. If you ever
see a page render as plain black text on white, that is the symptom of a
stylesheet name that does not match the file, and this is the first place
to look.
"USED BY" ANSWERED, since you left it as a question: all four pages load
this file. index.html uses the whole of it; Contact, Coming and Error use
[H4 CURVE], [H7 QUIET], [H8 COLON] and the mode blocks, and simply never
have an .Intro or a .Rotator for the rest of it to match.
CONTACT.HTML NOW LOADS A THIRD FILE ON TOP OF THIS ONE, CSS/Contact.css,
and [H9 FORM] and [H10 SOCIAL] have MOVED into it. That is the answer to
your question about where the growing contact rules should live: in their
own file, the way Art.html has Art.css. The signpost near the bottom of
this file, where those two blocks used to sit, says the rest.
--------------------------------------------------------------------------
Structure. (You wondered whether .Main should move into this file: it
should not. .Main is the reading column on every page, not just this
one, so it belongs in Negar-Default.css [07 COLUMN] with the rest of
the shared frame. What lives here is only what index.html alone uses.)
[H1 INTRO] "This is / Negar Tabibian."
[H2 ROTATOR] the two rotating lines underneath
[H4 CURVE] the green and yellow footer wave
[H5 IMAGE] the background image behind the heading
[H6 FARSI] where the Farsi sits, and the green dot beside it
SEARCH TAGS IN THIS FILE
[H1 INTRO]
[H2 ROTATOR]
[H3 MOTION] what happens for visitors who asked for less motion
[H4 CURVE] the footer wave, its sizing and its clearances
[H5 IMAGE] the background image, its sizing per screen mode
[H6 FARSI] the Farsi layout: text position and dot spacing
[H7 QUIET] the three quiet pages: Contact, Coming, Error
[H8 COLON] the green colon, a site-wide mark
[H9 FORM] >>> MOVED to CSS/Contact.css [C3 FORM]
[H10 SOCIAL] >>> MOVED to CSS/Contact.css [C5 ICONS]
[TODO] things to come back to
[MODE A] horizontal standard
[MODE B] vertical standard
[MODE C] horizontal small
[MODE D] vertical small
========================================================================== */
/* [H1 INTRO] ==========================================================================
[H1 INTRO]
--------------------------------------------------------------------------
"This is / Negar Tabibian." UNCHANGED.
========================================================================== */
/* NO max-width HERE, AND IT MATTERS. .Rotator below has to hide anything
above and below its two-line window, and the only way to hide overflow on
one axis in CSS is to hide it on both. So if .Intro is ever narrower than
the longest of the six statements, "I create built environments." gets
guillotined mid-word and the fade makes it look intentional, which is the
worst kind of bug. Leave this at full width and let each line's own
white-space rule decide where it ends. */
/* .intro width: auto, NOT 100%. With a left margin on it. auto is the block default and means
"fill what is left after the margin", which is what was wanted. */
.Intro {
display: block;
width: auto;
margin-left: clamp(var(--NPadX), calc(var(--NSideW) * 1), 17.5vw); /* original: clamp(var(--NPadX), calc(var(--NSideW) * 2), calc(var(--NSideW) * 8)) */
}
/* ---- ONE SET OF NUMBERS, TWO PLACES THAT USE THEM ----------------------
You asked that changing .IntroLead change the rotating lines with it. The
way to guarantee that is not to copy the values into both rules, because
copies drift; it is to declare them once and have both rules read them.
These five are declared on .Intro, which is the parent of both, so they are
inherited by the heading and by the rotator alike:
--NLeadSize font size
--NLeadLine line height
--NLeadWrap white-space
--NLeadMT margin above
--NLeadMB margin below
CHANGE A NUMBER HERE AND BOTH MOVE TOGETHER. The rotator's own two-line window is worked out from --NLeadSize
and --NLeadLine too, in [H2 ROTATOR], so its height follows as well. */
/* THE BLOCK CANCELS ITS OWN FIRST TOP MARGIN. --NLeadMT is applied to both
the heading and the rotator, as you asked, and on the rotator it does real
work: it is the space between the name and the rotating lines. On the
heading it is the FIRST thing in the block, so all it can do is drag the
whole intro upward, which was pulling "This is" five pixels above the Art
disc and undoing the alignment you asked for twice.
Adding the same amount back here cancels that one side effect and leaves
the variable doing its useful job everywhere else. Measured after: the
heading and the disc are level again, to the pixel.
THE CANCEL READS --NLeadMTop, NOT --NLeadMT. Those are the same number
everywhere except where a mode gives .IntroLead a different top margin of
its own, which [MODE B] does. When that happened the cancel was still
subtracting the old number, the two no longer met at zero, and "This is"
sat ten pixels below the Art disc on a tall portrait screen.
So there is now one name for THE TOP MARGIN THE HEADING ACTUALLY GETS:
--NLeadMTop what .IntroLead's margin-top is set from defaults to --NLeadMT, so nothing changes on its own)
.IntroLead reads it, and .Intro cancels exactly it. To move the heading's
top margin in any mode, set --NLeadMTop on .Intro in that mode and the
cancel follows by itself. Do not set margin-top on .IntroLead directly any
more; that is the thing that broke the alignment. */
/* ---- FARSI RUNS AT 85% -------------------------------------------------
Persian letterforms carry more ink per line than Latin at the same point
size, so type set to match optically has to come down a step. You put the
figure at 85%.
--NFaScale is applied to --NLeadSize itself rather than to the two rules
separately. That means one number does all of it, and it also keeps the
link you asked for earlier intact: the heading, the name and the rotating
lines all read --NLeadSize, so all three come down together and stay in
proportion with each other. Scaling only two of the three would have made
the rotating lines bigger than the heading above them in Farsi.
LINE HEIGHTS ARE NOT TOUCHED. --NLeadLine and --NRotLine are lengths in
their own right, so the spacing between lines stays exactly where you set
it while the letters get smaller. That is what you asked for.
IF YOU WANT THE ROTATING LINES LEFT AT FULL SIZE, give .Rotator its own
font-size: calc(var(--NLeadSize) / var(--NFaScale)) and it opts out. */
:root {
--NFaScale: 1; /* Defining English Standard Scale when Farsi is off */
}
.Lang-fa {
--NFaScale: 0.85; /* Adjusting Farsi Scale */
}
.Intro {
margin-top: calc(var(--NLeadMTop) * -1);
/* cancels the heading's own top margin, whatever it is
--NLeadMTop is what .IntroLead's margin-top is set from defaults to --NLeadMT */
--NLeadSize: calc(var(--NGap) * 2.75 * var(--NFaScale)); /* font size -- original clamp(1.9rem, 3.4vw, 3.5rem) */
--NLeadLine: calc(var(--NGap) * 3.5); /* line height -- original 1.15 */
--NLeadWrap: nowrap;
--NLeadMT: calc(var(--NGap) * -0.25); /* margin top -- original -0.25 */
--NLeadMB: calc(var(--NGap) * -0.75); /* margin below -- original -0.75 */
--NLeadMTop: var(--NLeadMT); /* the heading's top margin. override THIS, not .IntroLead */
}
.IntroLead {
font-size: var(--NLeadSize);
line-height: var(--NLeadLine);
white-space: var(--NLeadWrap);
margin-top: var(--NLeadMTop);
margin-bottom: var(--NLeadMB);
}
.IntroName {
font-size: calc(var(--NLeadSize) * 1.25); /* original clamp(2rem, 3.6vw, 3.65rem) */
font-weight: 700;
line-height: calc(var(--NLeadLine) * 1.75); /* original 1.15 */
white-space: nowrap;
display: block;
margin-bottom: calc(var(--NLeadMB) * -5); /* original clamp(1.5rem, 4.5vh, 3.1rem) */
}
/* ==========================================================================
[H2 ROTATOR]
--------------------------------------------------------------------------
The six statements, two visible at a time. and after the sixth it comes back round to the first. It never stops and there is no seam at the loop point.
HOW IT IS BUILT.
.Rotator is a box exactly two lines tall with its overflow hidden. .RotatorTrack inside it is the list of six. Every tick the track slides up by one line, and the moment that slide finishes the first item is quietly moved to the end of the list and the track snaps back to zero with the transition switched off, so the eye never catches it. That is why there are only six items in the HTML and no duplicates to keep in sync: the loop is made by moving one element, not by cloning.
THE TWO DIALS, both right here:
--NRotHold how long a line rests before moving (your spec: 1s)
--NRotSlide how long the movement itself takes
If it reads as hurried, 1.6s is the number I would try first. Change --NRotHold here and nothing else needs touching, the script reads it from the CSS.
========================================================================== */
.Intro {
/* DO NOT DELETE --NRotHold BECAUSE NOTHING SEEMS TO USE IT. No CSS rule reads it, so a tidy-up would look at it and see a dead variable. It is read by Negar-JS.js [S3 ROTATOR], which asks the browser for its computed value so the timing lives here with the design rather than being buried in the script. Removing it drops the ticker back to its one second fallback. */
--NRotHold: 1.75s; /* your original spec was 1s. try 1.6s if it feels rushed */
--NRotSlide: 0.55s; /* the travel time */
/* ONE LINE'S HEIGHT, DERIVED RATHER THAN CHOSEN.
It is the heading's own line height, --NLeadLine, plus a little air.
Both are lengths, not em multiples, so the two-line window resizes
itself whenever you change the heading and never needs touching
separately. (It was written in em once. Do not go back: adding a
length to a bare number invalidates the whole calc() silently, and
that is what once made all six statements appear at the same time.)
--NRotAir is the only extra: how much room the rotating lines get over and above the heading's line height. At 0 they sit as tight as the heading does; 0.45 is the breathing space that was there before. */
--NRotAir: calc(var(--NGap) * 0.45);
--NRotLine: calc(var(--NLeadLine) + var(--NRotAir));
--NRotFade: 22%; /* how deep the fade at the top reaches */
}
.Rotator {
position: relative;
overflow: hidden;
font-size: var(--NLeadSize); /* original var(--NLeadMT) */
margin-top: var(--NLeadMT); /* original var(--NLeadMB) */
margin-bottom: var(--NLeadMB);
/* TWO LINES TALL, NOT ONE. This had become height: var(--NRotLine),
which is a single line, so even with the calc above repaired the
window would have shown one statement instead of the pair. The whole
effect depends on this being exactly two. */
height: calc(var(--NRotLine) * 2);
/* The soft top edge. Two properties saying the same thing, because
Safari still wants the -webkit- one. */
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--NRotFade),
#000 100%);
mask-image: linear-gradient(
to bottom,
transparent 0,
#000 var(--NRotFade),
#000 100%);
}
.RotatorTrack {
display: block;
transform: translateY(0);
}
/* .is-sliding is added by the script for the length of one move and taken
off again straight after. When it is absent the track has no transition,
which is exactly what makes the invisible snap-back possible. */
.RotatorTrack.is-sliding {
transition: transform var(--NRotSlide) var(--NEase);
transform: translateY(calc(var(--NRotLine) * -1));
}
.RotatorLine {
display: block;
height: var(--NRotLine);
line-height: var(--NRotLine);
white-space: var(--NLeadWrap);
}
/* ==========================================================================
[H3 MOTION]
--------------------------------------------------------------------------
For anyone whose system is set to reduce motion, and for anyone whose
JavaScript does not run.
Movement stops and the box opens up to show all six statements stacked. It
is not a degraded version, it is a straightforwardly good one: everything
you wanted to say is on the screen, just still. Nothing is lost and nobody
gets a headache.
The .no-js case is the same treatment. index.html carries class="no-js" on
the element and the script removes it on load, so if the script
never runs the class stays and this rule applies. A visitor with scripting
off sees all six lines and a working page rather than an empty gap.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.Rotator {
height: auto;
-webkit-mask-image: none;
mask-image: none;
}
.RotatorTrack,
.RotatorTrack.is-sliding {
transform: none !important;
transition: none !important;
}
}
.no-js .Rotator {
height: auto;
-webkit-mask-image: none;
mask-image: none;
}
/* ==========================================================================
[MODE A] HORIZONTAL STANDARD landscape, min-height: 501px
--------------------------------------------------------------------------
The default. The intro needs nothing of its own here: everything above is
written for this mode. Left in place as an empty, labelled slot so all
four modes appear in every page file in the same order.
(This used to say the intro is "vertically centered by .Main". It is not,
and has not been for a while: .Main is justify-content: flex-start in
Negar-Default.css [07 COLUMN], and the note there explains why centering
was given up. The heading is placed from --NContentTop instead, which is
what keeps it level with the Art disc.)
========================================================================== */
@media (orientation: landscape) and (min-height: 501px) {
/* nothing needed */
}
/* ==========================================================================
[MODE B] VERTICAL STANDARD portrait, min-width: 501px
--------------------------------------------------------------------------
A portrait window is narrow and tall, so the type comes down a step and the
name is allowed to wrap if it has to. Everything else holds.
THIS MODE NOW STARTS AT 501px RATHER THAN 768px. The full reasoning is in
Negar-Default.css under THE FOUR SCREEN MODES; the short version is that
portrait splits on width the way landscape splits on height, and 500 is
the empty space between the widest phone and the narrowest tablet. What it
changes in practice: a 600 or 700px upright window, a small tablet or an
unfolded phone, now gets this layout instead of the phone one.
========================================================================== */
@media (orientation: portrait) and (min-width: 501px) {
/* THE * var(--NFaScale) ON EACH OF THESE is what makes the 85% Farsi
step work in this mode too. These rules set a font size directly
instead of going through --NLeadSize, so without it they would ignore
the scale and Farsi would stay full size here while shrinking on a
wide screen. Your numbers are untouched; they are just multiplied by
1 in English and 0.85 in Farsi. */
/* YOUR TOP MARGIN, MOVED ONE STEP UP THE TREE. It is the same number you
set, calc(var(--NLeadMT) * -1); it is just declared as --NLeadMTop on
.Intro instead of as margin-top on .IntroLead, so that the cancel in
[H1 INTRO] subtracts THIS number rather than the default one. Set the
old way the two disagreed and the heading sat ten pixels below the Art
disc here, and only here. Measured after: level, both languages.
The rotator keeps its own margin-top, which is real spacing. */
/* ---- THE HEADING'S STEP IN FROM THE COLUMN, UPRIGHT ----------------
margin-left is set here because the one in [H1 INTRO] cannot work in
this mode, and now that this mode reaches down to 501px it shows.
[H1 INTRO] sets the step in from --NSideW, which is right on a wide
screen: a column width of air before the heading starts. Upright it is
not, for two reasons at once. This mode raises the column's floor, so
--NSideW is larger here than it is anywhere else, and .Main already
carries a margin of one full --NSideW to clear the column, so anything
else written from --NSideW is counted twice.
(The numbers that used to be in this paragraph came from the older
settings: --NSideW x 2 against a 2in floor, which on a 768px iPad put
the heading 599px in with 169px left for a line set nowrap, and the
rotating statements ran off the right edge. You have since retuned
both, so the arithmetic is different but the trap is the same.) At
501px
there was nothing left at all.
One --NPadX instead. The column plus .Main's own margin is the step
back; this is just the breathing space after it, and it is the same
measurement the phone uses, so the two portrait modes agree.
IF YOU WANT MORE AIR HERE, raise the multiplier on --NPadX rather than
bringing --NSideW back in: --NSideW is already counted once by .Main,
so anything written from it here is counted twice. */
/* ---- FOUR THINGS YOU ASKED FOR, AND THE FIVE DIALS THAT SET THEM ----
"IntroName a bit larger, the space between the rotating lines about
50 to 70% of what it is, the same for the space between the name and
the line above it, and 'This is' is not exactly level with the top of
the Art disc."
All four are set from --NLeadSizeB and --NLeadLine below, so they stay
in proportion if you move either one.
--NLeadSizeB the lead size. YOUR clamp, only given a name so
that the name and the cap fix can both read it
--NNameScale how much bigger the name is than the lead
--NLeadLine the leading, which sets BOTH the rotator step and
most of the gap under "This is"
--NNameLine the name's own leading
--NCapFix the alignment nudge, explained below
WHAT EACH ONE DID, measured off the rendered pixels at 768 x 1024,
before and after, in English:
name size 36.9px -> 45.0px your "a bit larger"
white between the
two rotating lines 45.5px -> 26.5px 58% of what it was
white under "This is" 97.0px -> 56.0px 58% of what it was
top of "This is" 15.5px below the ring -> 0.5px, level
MEASURED AS WHITE SPACE, NOT AS LINE HEIGHT, because white space is
what the eye reads and what you were describing. The two do not move
together: the type stays the same size, so taking a third off the
white takes only a fifth off the line-to-line step. For the record
the rotator step went 79px -> 60px, which is 76%.
TO MOVE EITHER GAP, change --NLeadLine for the rotating lines and the
name's margin-top for the gap under "This is". Each 1 on --NLeadMT is
5px at this size, so the margin's 5.7 is about 28px of the 56.
THE NAME WAS BARELY BIGGER THAN THE LINE ABOVE IT, which is most of
why this mode felt wrong. The lead was 36px and the name 36.9px, a 2%
difference nobody reads as a hierarchy. In the wide mode the name is
1.25 x the lead, so that ratio is used here too and the name goes to
45px. Change --NNameScale to move it. */
.Intro {
--NLeadSizeB: clamp(1.75rem, calc(var(--NPad) * 2), 2.25rem); /* your clamp, named so three rules can share it */
--NNameScale: 1.25; /* the name against the lead, same ratio as the wide mode */
--NLeadLine: calc(var(--NGap) * 2.55); /* original: inherited calc(var(--NGap) * 3.5) from [H1 INTRO] */
--NNameLine: calc(var(--NLeadLine) * 1.25);
--NLeadMT: calc(var(--NPad) * 0.25);
--NLeadMTop: calc(var(--NLeadMT) * -1); /* original 1 */
--NCapFix: calc((var(--NLeadLine) - var(--NLeadSizeB) * 1.16) / 2
+ var(--NLeadSizeB) * var(--NCapGap));
--NCapGap: 0.02; /* THE ONE DIAL for the alignment. See the note below. */
margin-left: var(--NPadX); /* original: the [H1 INTRO] clamp, which doubles --NSideW */
margin-top: calc(var(--NCapFix) * -1); /* original 0 -- see the cap note below */
}
/* ---- WHY "THIS IS" LOOKED LOW WHEN THE MATH SAID IT WAS LEVEL ------
The BOX was level with the disc. The LETTERS were not, by 15.5px, and
the letters are what you see. Two things sit between the two:
HALF-LEADING. A line box is taller than its type. The spare room
is split evenly above and below, so a 36px line set on 70px of
leading starts its letters 17px down. That was most of the 15.5.
THE ASCENT GAP. Even with no leading at all, a font reserves room
above the capitals for accents and tall letters. The capital T
starts below the top of its own em box, by roughly 0.15 of the
font size in a geometric face like Century Gothic.
--NCapFix adds those two together and .Intro pulls itself up by that
much, so the top of the T lands on the top of the ring. Reducing the
leading above already removed most of the problem; this closes the
rest.
IF IT IS A HAIR OFF ON YOUR MACHINE, change --NCapGap on .Intro above
and nothing else. Every font puts its capitals at a slightly different
height, and the value here was measured against the fallback face in a
test browser rather than the Century Gothic you see. Bigger number,
heading moves up; smaller, it moves down. 0.01 is worth about a third
of a pixel at this size. */
.IntroLead, .Rotator {
font-size: calc(var(--NLeadSizeB) * var(--NFaScale)); /* original the clamp written out; same number, now shared */
margin-bottom: calc(var(--NLeadMT) * 2); /* original 1 */
}
.Rotator {
margin-top: calc(var(--NPad) * 2); /* original calc(var(--NLeadMT) * -1) */
}
/* THE NAME'S OWN LEADING WAS THE OTHER HALF OF THE GAP ABOVE IT. It was
inheriting 122px of line-height from [H1 INTRO] against a 37px face,
so 40px of empty room sat above the capitals before any margin was
counted. --NNameLine ties it to --NLeadLine instead.
YOU HAVE SINCE MULTIPLIED IT BY ZERO on the line-height line below,
which collapses the name's line box to nothing and lets the margins
do all the spacing. That works and it is stable as long as the name
stays on ONE line, which it does at every width in this mode. If a
longer name or a bigger --NNameScale ever makes it wrap, two lines
would print on top of each other; put the 0 back to 1 and the
variable takes over again. */
.IntroName {
font-size: calc(var(--NLeadSizeB) * var(--NNameScale) * var(--NFaScale)); /* original calc(clamp(1.8rem, 4.8vw, 3.1rem) * var(--NFaScale)) */
line-height: calc(var(--NNameLine) * 0); /* original: inherited calc(var(--NLeadSize) * 2.5) */
white-space: normal;
margin-top: calc(var(--NLeadMT) * 5.7); /* original calc(var(--NLeadMT) * 4) -- see the gap note */
margin-bottom: calc(var(--NPad) * 4); /* original calc(var(--NGap) * 3) */
}
}
/* [MODE C] ==========================================================================
[MODE C] HORIZONTAL SMALL landscape, max-height: 500px
--------------------------------------------------------------------------
A phone on its side is the shortest window on the site, often 375 to
390px tall. The type shrinks and the gap under the name closes right up,
so the name and both rotating lines still fit above the fold together.
========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
/* THE LINE HEIGHT IS HALVED HERE, and it has to be stated here because
the font sizes below are not tied to it.
The font comes down in vw, about 27px on an 844px phone, but
--NLeadLine is set in [H1 INTRO] as --NGap x 3.5, which is 56px on a
390px-tall screen. The heading had twice the leading it needed, and
the name, at 1.75 times that, had 98px of line for a 29px word.
Halved: lead line 28px, name 49px, each rotator slot 35px. The
two-line rotator window follows by itself, because --NRotLine is
built from --NLeadLine.
FARSI IS NOT AFFECTED. Line heights are lengths and are not scaled
by the 85%, so both languages keep identical spacing.
A GOOD SIDE EFFECT. "This is" now reads level with the top of the
Art disc. The boxes were always level; the extra leading was pushing
the letters about 14px down inside their box.
ONE EDGE TO WATCH. An iPad held sideways (1024 x 768) is also this
mode, and there the font reaches 32px against a 28px line. Nothing
clips: the heading has no overflow hidden and the rotator slot is
35px. If it looks cramped there, raise 1.75 to 2. */
.Intro {
--NLeadLine: calc(var(--NPad) * 1.75);
/* original calc(var(--NGap) * 3.5), from [H1 INTRO] */
padding-top: calc(var(--NPad) * 4.5); /* original 20% */
margin-left: calc(var(--NSideW) * 0.5);
}
/* THE * var(--NFaScale) ON EACH OF THESE is what makes the 85% Farsi
step work in this mode too. These rules set a font size directly
instead of going through --NLeadSize, so without it Farsi would stay
full size here. Multiplied by 1 in English and 0.85 in Farsi. */
.IntroLead,
.Rotator {
font-size: calc(clamp(1.2rem, 3.2vw, 2rem) * var(--NFaScale));
}
.IntroName {
font-size: calc(clamp(1.3rem, calc(var(--NPad) * 2), 2.2rem) * var(--NFaScale)); /* calc(clamp(1.3rem, 3.5vw, 2.2rem) */
line-height: calc(var(--NPad) * 4.5);
margin-bottom: clamp(0.7rem, 3vh, 1.4rem);
}
}
/* ==========================================================================
[MODE D] VERTICAL SMALL portrait, max-width: 500px
--------------------------------------------------------------------------
GALAXY S8: 360 x 740 in CSS pixels, so it is
this mode, comfortably, with 140px of room before the boundary. The S8 is
also the narrowest mainstream phone still in use at 360, and the widest is
the iPhone Pro Max family at 430. Both sit well inside this mode, and both
were in the measurements below. 320 (the old iPhone SE) is the floor the
--IntroName guard is written for.
--------------------------------------------------------------------------
The narrowest case. "I create built environments." is the longest of the
six lines and it will not fit on one line on a 360px phone at any size that
is still worth reading, so white-space: nowrap is lifted here and the
rotator line box is allowed to hold two wrapped lines.
That is the one place the design bends on a phone, and it bends rather than
shrinking the type to 12px, which is the alternative and is worse.
========================================================================== */
@media (orientation: portrait) and (max-width: 500px) {
/* ---- THE HEADING'S STEP IN FROM THE EDGE, ON A PHONE ----------------
Cleaned up, and your three questions in the old note answered.
--NLeadSize, since you asked for it in writing: it is the ONE font
size the whole heading block is built from, declared on .Intro in
[H1 INTRO] as calc(--NGap * 2.75 * --NFaScale). Everything else is a
multiple of it, so one number moves all of them together:
.IntroLead x 0.5 here, x 1 in the wide modes
.IntroName x 0.8 here, x 1.25 in the wide modes
.Rotator x 0.5 here, and always the same as .IntroLead
--NGap makes it vertical in origin, and --NFaScale is what carries the
85% Farsi step through all three at once.
THE AXIS RULE, also as you wrote it: --NPad and --NGap are vertical,
--NPadX and --NSideW are horizontal. So a top or bottom margin is
written in --NPad or --NGap, and a left or right one in --NPadX. The
.Intro rule below follows it: --NPad above, --NPadX on both sides.
AND THE FULL INCH, which you marked "check?": yes, --NSideMin is 1in
in [02 SIZES], so --NSideW never computes smaller than 96px however
narrow the window gets. That is right for the three modes that have a
column and wrong for this one, which does not, and it is why the step
in here is --NPadX and not --NSideW. Keep it that way if you retune
it: --NPadX and --NGap mean something on a phone, --NSideW does not. */
.Intro {
margin-top: calc(var(--NPad) * 3);
margin-left: calc(var(--NPadX) * 0.75); /* original: clamp(var(--NPad), calc(var(--NSideW) * 0.75), calc(var(--NSideW))) */
margin-right: calc(var(--NPadX) * 0.75);
}
.IntroLead, .Rotator {
font-size: calc(var(--NLeadSize) * 0.5); /* original x1 */
line-height: calc(var(--NLeadLine) * 0.75); /* original x1 */
margin-top: calc(var(--NLeadMTop) * 0.5); /* original x1 */
margin-bottom: calc(var(--NLeadMB) * 0.25); /* original *1 */
}
/* make sure negar tabibian plus dot is always one line and fits and never goes to 2nd line */
.IntroName {
font-size: min(calc(var(--NLeadSize) * 0.8), calc(9.8vw * var(--NFaScale))); /* original calc(var(--NLeadSize) * 0.8) -- the min() is the 320px guard */
line-height: calc(var(--NLeadLine) * 0.75); /* original calc(var(--NLeadSize) * 2.5) then calc(var(--NLeadLine) * 0.75) */
margin-bottom: calc(var(--NLeadMB) * -2); /* original calc(var(--NLeadMB) * -5) */
}
/* ---- THE ROTATOR SLOT ON A PHONE ------------------------------------
"Where are these sitting", answered: both rules below are inside
[MODE D], so they apply on phones only. The .Intro one sets the two
rotator variables, and .RotatorLine lifts the no-wrap. They sit at the
end of this block because they are the last thing the mode changes.
white-space goes back to normal so a long statement can wrap onto a
second line rather than run off the side of the phone, which is why
each rotator slot has to be tall enough to hold two wrapped lines.
--NRotLine is set just below to do that. (It was written in em once,
2.4em against 1.45em elsewhere; it is built from --NLeadLine now,
like everything else in the heading.)
DELIBERATELY NOT display: flex. Flex would make the green dot its own
flex item, and because the dot is set at 1.6em with a line-height of
zero it would float up to the top of the row instead of sitting on the
baseline. Ordinary inline flow puts it exactly where it belongs. */
.Intro {
--NRotAir: calc(var(--NPad) * 0.225);
--NRotLine: calc(calc(var(--NLeadLine) * 0.5) + var(--NRotAir));
}
.RotatorLine {
white-space: normal;
}
}
/* [H4 CURVE] ==================================================================
THE SIZES ARE YOURS, and you have moved them off vw onto the two spacing
variables since this note was first written:
landscape clamp(2in, --NPadX x 16, 18in) was clamp(2in, 48vw, 18in)
portrait clamp(2in, --NPad x 16, 8in) was clamp(2in, 80vw, 8in)
sits a multiple of --NPad up from the bottom, set per mode on
.FooterCurve below was a flat 20% of the window height
The art is 1323.19 x 156.62 in its own units, an aspect of 8.45 : 1, so the
width alone decides the height: whatever the width comes out at, the height
is that divided by 8.45.
========================================================================== */
:root {
--NCurveW_Wide: clamp(2in, calc(var(--NPadX) * 16), 18in); /* landscape */
--NCurveW_Tall: clamp(2in, calc(var(--NPad) * 16), 8in); /* portrait ||| original: clamp(2in, 80vw, 8in) */
--NCurveW: var(--NCurveW_Wide); /* the mode blocks swap it */
/* A GAP AT THE LEFT, NOT FLUSH TO THE EDGE. --NPad is the same value the
column is padded with, so the curve's tip starts level with the air
around everything else rather than running off the side of the screen.
Set it to 0 to take it back to the window edge. */
}
.FooterCurve {
position: fixed;
left: calc(var(--NPad) * 1); /* original 21% */
bottom: calc(var(--NPad) * 10.5); /* original var(--NCurveBottom) instead of NPad which was original 21% */
z-index: 10;
width: calc(var(--NCurveW) + calc(var(--NPad) * 1)); /* original var(--NCurveLeft) instead of NPad */
pointer-events: none;
line-height: 0;
}
/* THE aspect-ratio IS A SEATBELT. An ![]()
pointing at an SVG takes its
height from that file's viewBox. If a re-export ever comes out of
Illustrator with the A4 artboard still on it, as this file currently has,
the browser would compute the box as TALLER than it is wide and throw a
great empty rectangle across the page. Stating the shape here means the
worst case is a curve that looks wrong inside a correctly sized box,
rather than a layout that falls over.
1323.19 / 156.62 is the drawing's real proportion, taken straight from the
viewBox of your corrected export. */
.FooterCurve img {
width: 100%;
height: 100%;
aspect-ratio: 1323.19 / 156.62;
object-fit: contain;
display: block;
}
.FooterCurve {
aspect-ratio: 1323.19 / 156.62;
}
/* [H4 CURVE] MODE A ---- horizontal standard ------------------------------ */
@media (orientation: landscape) and (min-height: 501px) {
:root { --NCurveW: var(--NCurveW_Wide); }
}
/* [H4 CURVE] MODE B ---- vertical standard -------------------------------- */
@media (orientation: portrait) and (min-width: 501px) {
:root { --NCurveW: var(--NCurveW_Tall); }
.FooterCurve {
bottom: calc(var(--NPad) * 12); /* original var(--NCurveBottom) instead of NPad */
}
/* THE } BELOW CLOSES THE MEDIA QUERY, and it was missing. The one above
closes .FooterCurve; this one ends "portrait and 501px and up".
WITHOUT IT the query never closed, so EVERYTHING after this point in
the file, both curve blocks below, [H5 IMAGE], [H6 FARSI], [H7 QUIET],
[H8 COLON], [H9 FORM] and [H10 SOCIAL], was nested inside it and ran
only on an upright tablet. The background photograph was gone on a
desktop and on a phone, the contact form lost its styling, the colon
lost its shape, and the two landscape queries further down could never
match at all, because a window cannot be portrait and landscape at
once.
SAME FAULT AS THE STRAY } IN Negar-Default.css MODE C, in the other
direction: that one ended a block too early, this one never ended it.
Both are silent. The check is the same: strip the comments and count
{ against }. They must come out equal, and index.css was one short. */
}
/* [H4 CURVE] MODE C ---- horizontal small ------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {
:root {
--NCurveW: var(--NCurveW_Wide);
}
.FooterCurve {
bottom: calc(var(--NPad) * 3.5); /* original var(--NCurveBottom) instead of NPad */
}
}
/* [H4 CURVE] MODE D ---- vertical small ----------------------------------- */
/* THE CURVE ON A PHONE: centered rather than hung off one edge, one
--NPadX clear of each side, and never wider than 5in.
left: 50% with a -50% translate is the centering. The width takes
whichever is smaller, the screen minus its two margins or your 5in
ceiling, so it fills the space on a small phone and stops growing on a
large one. */
@media (orientation: portrait) and (max-width: 500px) {
:root {
--NCurveW: min(calc(100vw - calc(var(--NPadX) * 2.5)), 5in);
}
.FooterCurve {
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--NPad) * 3.75); /* original var(--NCurveBottom) instead of NPad */
}
}
/* [H5 IMAGE] ==================================================================
[H5 IMAGE]
--------------------------------------------------------------------------
THE FADED BACKGROUND IMAGE. Moved here from Negar-Default.css, because it only appears on this page (and contact and error and coming).
IT IS A BACKGROUND, NOT AN ![]()
, and that is doing two jobs at once. It
carries no information, so a screen reader should skip it entirely, which a background does by itself. And there is no image element under the cursor, so a right-click menu never offers to save it. That is the strongest piece of image protection on the page and it costs nothing.
---------------------------------------------------------------------------
POSITIONING
Always as tall as the window, in every mode. The picture has a soft fade on
its left side and hard cuts top, bottom and right. So the rule is: fill the
height and push it far enough right that only the soft edge is ever in
view. Sized any smaller and a plain rectangular border appears across the
page where the photograph simply stops.
--NPortraitFade dims it on the two small modes. On a wide screen the image
sits to the right of the text and never touches it. On a phone there is no
"to the right of", and at full strength the words sit on top of an eyebrow.
Set it to 1 in [MODE C] and [MODE D] to see it undimmed and judge for
yourself.
========================================================================== */
.Portrait {
position: fixed;
inset: 0;
z-index: -5;
/* THE FILE IS THE WEBP, AND THIS LINE IS WHY THE BACKGROUND WENT BLANK.
You re-exported the picture as Negar-Background.webp, lossy 90, 230 KB,
and that is the only copy in Assets. This line was still asking for
Negar-Background.jpg, a file that is no longer there, so the browser
found nothing and drew the navy ground on its own with no error and no
clue. Pointed at the file you actually have.
IF YOU SWAP THE PICTURE AGAIN, this one line is the thing to change,
and the file name has to match exactly, extension included. */
background-image: url("../Assets/Negar-Background.webp"); /* original ...Negar-Background.jpg, which no longer exists */
background-repeat: no-repeat;
background-size: var(--NPortraitSize, auto 100vh);
background-position: var(--NPortraitPos, right -30vh center);
opacity: var(--NPortraitFade, 1);
}
/* [H5 IMAGE] MODE A ---- horizontal standard ------------------------------ */
@media (orientation: landscape) and (min-height: 501px) {
:root {
--NPortraitSize: auto 100vh;
--NPortraitPos: right -30vh center;
}
}
/* [H5 IMAGE] MODE B ---- vertical standard --------------------------------
Left edge parked at 30vw, which on a tablet puts the fade just clear of the
column and behind the heading. */
@media (orientation: portrait) and (min-width: 501px) {
:root {
--NPortraitSize: auto 100vh;
--NPortraitPos: 30vw center;
}
}
/* [H5 IMAGE] MODE C ---- horizontal small --------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
:root {
--NPortraitSize: auto 100vh;
--NPortraitPos: right -18vh center;
--NPortraitFade: 0.45;
}
}
/* [H5 IMAGE] MODE D ---- vertical small -----------------------------------
A phone is so much narrower than the picture is wide that it covers the
whole screen, which is why the fade matters more here than anywhere else:
it is the only thing keeping the words readable. */
@media (orientation: portrait) and (max-width: 500px) {
:root {
--NPortraitSize: auto 120vh; /* option: 80vh */
--NPortraitPos: bottom center; /* right -25vw center */
--NPortraitFade: 0.45;
}
.Portrait {
background-position: -30vw bottom; /* original: var(--NPortraitPos, right -30vh center) */
}
}
/* [H6 FARSI] ==================================================================
[H6 FARSI]
--------------------------------------------------------------------------
TWO THINGS YOU ASKED FOR, BOTH ONLY VISIBLE IN FARSI.
1. WHERE THE TEXT SITS
You said the Farsi needed a right margin of about seven inches, then said
what you actually wanted was the same place as the English but justified
right. The second is the better description and it is what is built.
The problem: in English the heading block fills the whole width and the
text starts at its left edge, which is what you see. Switch to Farsi and
dir="rtl" right-aligns the text inside that same full-width block, so it
flies to the far right of the window, over the eyes in the photograph.
A seven inch right margin would fix it at one window size and be wrong at
every other.
The fix is to size the block to its own content rather than the window:
width: fit-content the block is exactly as wide as its longest line
margin-left the left step, now a share of --NDiscW
margin-right the same, since you set it by hand
fit-content is the load-bearing part: the block is exactly as wide as its
longest line, so the Farsi right-aligns inside it and ends where that line
ends, rather than against some guessed distance.
THE RIGHT MARGIN USED TO BE auto, which let the block absorb whatever was
left over. You have given it the same value as the left, which centers the
block in what remains instead. That is a choice, not a fault; just know
that the two numbers now have to be changed together.
Only applied in Farsi. English keeps width: auto so the rotating lines,
which live in a box with its overflow hidden, can never be clipped.
2. THE GREEN DOT
Two separate faults, which is why it looked so far off.
The dot is pulled toward its sentence by a negative margin. That margin was
written as margin-left, a physical side. In English the dot sits to the
right of the words, so pulling left pulls it closer. In Farsi the dot sits
to the LEFT of the words, so the very same rule pushed it further away.
It is now margin-inline-start, which means "the side the text starts from",
so it tightens toward the words in both directions.
Then the amount: --NDotPull, one number per language. It started with
Farsi pulled harder than English, on the reasoning that Naskh letters end
in a long flat stroke that already reads as space. Looking at it, you went
the other way: -0.15em in English and -0.125em in Farsi, so Farsi is now
pulled slightly LESS. Your eye on your own script wins over the reasoning;
the note is corrected rather than the value.
Both are one number each, right here, if you want to keep nudging.
========================================================================== */
:root {
--NDotPull: -0.15em;
}
/* YOUR 40%. The gap between the last letter and the dot was roughly 0.3em
wide, so taking 40% off it means pulling in by about another 0.13em, which
is what -0.28em does. I first set this to -0.45em, which was reading your
"40% closer" as "make the number three times bigger", and the dot ended up
printed on top of the last letter. This is the honest arithmetic.
Naskh needs more pull than a Latin sans in any case: its letters end in a
long flat stroke that already reads as space, so the same gap looks wider.
ONE NUMBER, RIGHT HERE, if you want to keep nudging. More negative pulls
the dot closer to the word. */
.Lang-fa {
--NDotPull: -0.125em; /* original: -0.28 */
}
/* --NDotPull is read by .Dot::before in Negar-Default.css [03 TYPE]. The
rule that used to sit here set margin-inline-start on the span itself,
which stopped working the moment the span became plain inline. Nothing
needed here any more: declaring the variable is the whole job. */
.Lang-fa .Intro {
width: fit-content;
margin-left: calc(var(--NDiscW) * 0.35); /* original: 8vh */
margin-right: calc(var(--NDiscW) * 0.35); /* original: auto */
}
/* ---- 3. NUMBERS AND UNTRANSLATED TEXT INSIDE A RIGHT-TO-LEFT PAGE -------
A problem that only shows up once the page is in Farsi, and looks like a
bug in your content rather than in the layout.
When the document runs right to left, the browser lays out every run of
text in that direction. That is correct for Persian and wrong for anything
Latin sitting inside it: "© 2020-2026" came out as "2026-2020 ©", and
"Negar Tabibian." came out with its full stop on the wrong end. Nothing was
mistyped; the browser was simply reading them right to left.
The copyright's year line is forced back to left-to-right below, because a
date and a © symbol read the same way in every language.
The other two lines are handled in Negar-JS.js instead: when a translatable
span has no Farsi yet, the script marks it as left-to-right so the English
showing through stays readable. That fixes every untranslated string on the
site automatically, including ones added later, and it stops doing anything
the moment you supply the Farsi. */
.Lang-fa .Copyright > span:first-child {
direction: ltr;
unicode-bidi: isolate;
}
/* [TODO] ======================================================================
[TODO]
--------------------------------------------------------------------------
PARKED, NOT FORGOTTEN. Things decided but not built yet.
MAILCHIMP SIGN-UP POP-UP
You want a window that opens and invites people to join the email list.
Not built. What has to be settled first, because these change the build
rather than being adjustable afterwards:
WHEN it opens. On arrival is the most effective and the most disliked;
after a delay, after a scroll, or on the way out are all gentler. On
exit is my suggestion for a portfolio: it never interrupts someone
looking at the work.
HOW OFTEN. Once ever, once a month, or every visit. Once a month is
usual. This needs the browser to remember, which is a cookie or a
localStorage entry, which is a privacy notice question in Europe.
WHAT IT SAYS, in both languages.
HOW IT CLOSES. A close button, the Escape key and a click outside all
have to work, and while it is open the keyboard has to stay trapped
inside it or the page behind becomes a maze for anyone not using a
mouse.
WHAT ALREADY EXISTS. v1 loaded the Mailchimp connected-site script and
carried an overlay called #mc_embed_shell with a close button. That
markup is still in v1's Home.html and its CSS is in v1's
Negar-Default.css, so there is a starting point rather than a blank
page. It was left out of v2 on purpose: it was loading on every visit
for a panel that was not on the page.
Say the word and this gets built properly.
========================================================================== */
/* [H7 QUIET] ==================================================================
[H7 QUIET]
--------------------------------------------------------------------------
THE THREE QUIET PAGES: Contact.html, Coming.html and Error.html.
They share the landing page's column, discs, language switch, copyright and
curve, and drop the two things that make the landing page a landing page:
the background photograph and the rotating heading. What is left is a
column, a rule, and something to read.
THEY START WHERE THE DISCS START. .Main-Quiet inherits --NContentTop from
.Main, so the first line of a quiet page sits level with the top of the Art
disc, exactly as "This is" does. That one shared measurement is most of what
makes the pages feel like one site rather than four.
MEASUREMENTS. Horizontal values are vw or a multiple of --NDiscW, vertical
values are vh or a multiple of --NGap. Same rule as everywhere else.
========================================================================== */
/* THE CURVE IS IDENTICAL TO THE LANDING PAGE, as you asked. It briefly had
its own lower position on these pages so it would not cross the message
form; you would rather the whole site agree with itself, which is the
better instinct, so that override is gone. There is now exactly one curve
position for the whole site, in [H4 CURVE]. */
.Main-Quiet {
max-width: none;
}
/* EQUAL MARGINS BOTH SIDES, and the box is as wide as what is left. The
62ch cap has gone: it was what forced the contact heading onto two lines
and made the paragraphs narrower than you wanted.
THE max-width SUBTRACTS BOTH MARGINS. width: 100% plus margins means "as
wide as the space AND THEN pushed inward", which hangs the block off the
side and gives the page a horizontal scrollbar. Taking the margins out of
the maximum keeps it inside at every size.
--NQuietSide is the one dial. It is a multiple of --NDiscW, so it is a
horizontal measure driven by a horizontal measure, which is the rule. */
:root {
/* YOUR 1.5 x --NDiscW, WITH A CEILING. On a wide screen your value wins
and nothing changes. On a portrait tablet the column is proportionally
much wider, so 1.5 x the disc was eating 156px off each side of a
551px space and squeezing the text into a 183px ribbon. The 8vw cap
only ever engages there. Raise it to see your number everywhere and
the narrow columns come back with it. */
--NQuietSide: min(calc(var(--NDiscW) * 1.5), 8vw);
}
.Quiet {
width: 100%;
max-width: calc(100% - var(--NQuietSide) * 2);
margin-left: var(--NQuietSide);
margin-right: var(--NQuietSide);
}
.QuietLead {
font-size: calc(var(--NGap) * 1.3);
line-height: 1.3;
color: var(--NColor4);
margin-bottom: calc(var(--NGap) * 0.4);
}
/* ONE LINE, AT EVERY WIDTH, WITHOUT A TABLE OF PER-SCREEN SIZES.
A heading marked -OneLine has to stay on one line, and how much room it
has depends on the mode: the column takes a different share of the window
in each. Sizing it from vw would need four different numbers and would
still be wrong between them.
cqi solves it properly. .Quiet is declared a container below, so 1cqi is
one percent of THE BOX rather than of the window. One rule, right at every
size, and it re-fits itself if you change the side margins.
THE NUMBERS BELOW ARE THE GENERIC ONES, and Contact.html no longer uses
them: its heading is "Let's get in touch:" now, much shorter and much
smaller, and Contact.css [C1 TITLE] overrides this rule on three class
names. This one is what any future -OneLine heading gets before anyone
tunes it.
IF YOU REWRITE SUCH A HEADING MUCH LONGER, come back to the 6. Roughly:
100 divided by (characters x 0.5) is the number that fits. */
.Quiet {
container-type: inline-size;
}
/* BOTH CLASS NAMES IN THE SELECTOR, and that is deliberate. .QuietTitle
below sets its own font-size and appears later in the file, so with one
class each they tie on specificity and the later one wins: this rule was
silently doing nothing at narrow widths. Naming both classes makes this
the more specific rule and it holds wherever it sits. */
.QuietTitle.QuietTitle-OneLine {
white-space: nowrap;
font-size: min(2.9rem, 6cqi);
}
.QuietTitle {
font-size: clamp(1.6rem, 4vw, 2.9rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: calc(var(--NGap) * 1.6);
}
/* JUSTIFIED, as you asked, and the 52ch cap is gone so the paragraphs run
the full width of the box.
ONE THING JUSTIFICATION DOES: it stretches the spaces between words to
make both edges straight, and on a narrow column that can leave rivers of
white running down the page. hyphens: auto lets the browser break long
words instead, which is what keeps those spaces reasonable. If you ever
dislike seeing hyphens, turn that one line off and accept looser spacing
on the narrow screens. */
.QuietBody {
font-size: clamp(0.95rem, 1.25vw, 1.15rem);
line-height: 1.7;
margin-bottom: calc(var(--NGap) * 0.9);
text-align: justify;
hyphens: auto;
}
/* space-between IS THE JUSTIFY. The paragraphs above have straight edges on
both sides, so the row of links under them has to as well: the first sits
on the left edge, the last on the right edge, in line with the text above.
That is what makes the block read as one shape rather than a paragraph
with something loose underneath it.
On a phone the links stack, and stacked links flush left is correct, so
[H7 QUIET] MODE D sets this back to flex-start. */
.QuietActions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: calc(var(--NGap) * 1.5);
margin-top: calc(var(--NGap) * 1.6);
}
/* A quiet link: no button, no box, just a green rule under it that thickens
on hover. Same language as the underline on the active EN / FA button, so
the site only ever has one idea of what "this is a link" looks like. */
.QuietLink {
display: inline-block;
min-height: 0;
padding-bottom: 0.25em;
color: var(--NColor5);
font-size: clamp(0.95rem, 1.25vw, 1.15rem);
text-decoration: none;
border-bottom: 2px solid var(--NColor3);
transition: color 0.25s var(--NEase),
border-bottom-width 0.25s var(--NEase);
}
.QuietLink:hover,
.QuietLink:focus-visible {
color: var(--NColor3);
border-bottom-width: 4px;
}
/* [H8 COLON] ==================================================================
[H8 COLON]
--------------------------------------------------------------------------
THE COLON, treated the same way the green dot is: as a mark rather than
punctuation. You asked for bolder, with the two dots closer together.
BOLDER is easy: a heavy monospace face at 1.35em.
CLOSER TOGETHER is not, because the gap between the two dots is drawn into
the glyph and no CSS property reaches inside a letter. So it is squeezed
from outside instead: scaleY(0.72) compresses the character vertically,
which pulls the dots toward each other while leaving their width alone. The
negative margins put back the space the squeeze would otherwise leave, and
translateY nudges it back onto the baseline it was sitting on.
TWO DIALS:
--NColonSquash how close the dots get. Lower is closer. 0.6 is tight,
0.85 is barely squeezed at all
--NColonSize how big and heavy it reads
It is a separate for the same reason the green dot is: the language
switch replaces the text beside it and would otherwise wipe it out.
========================================================================== */
:root {
--NColonSquash: 0.72;
--NColonSize: 1.35em;
}
/* THE COLON IS DRAWN BY ::before, AND THE SPAN ITSELF IS PLAIN INLINE.
That looks like a detour and it is the fix for the same bug the green dot
had: an inline-block box gives the browser somewhere to break the line, so
a colon at the end of a heading could drop onto a line of its own. The
squeeze needs a transform, and a transform needs an inline-block, so the
transform moved onto a pseudo-element INSIDE a plain inline span. The span
offers no break opportunity, the pseudo does the squeezing, and the colon
now stays welded to its sentence.
Measured rather than assumed: across 260 window widths the old version
orphaned the colon at 51 of them. This one, zero.
THE SPAN IS EMPTY IN THE HTML. The character lives in content: ":" below.
The one cost: with CSS switched off entirely the colon is not there. That
is a page already showing unstyled black text on white, so it is a fair
trade for punctuation that never breaks.
(The two dials are listed at the top of this block, thirty lines up.)
========================================================================== */
.Colon {
display: inline;
}
.Colon::before {
content: ":";
font-family: var(--NFontDot);
font-weight: 700;
font-size: var(--NColonSize);
line-height: 0;
display: inline-block;
transform: scaleY(var(--NColonSquash)) translateY(0.06em);
transform-origin: center;
margin-inline-start: -0.06em;
}
/* WHY THIS ONE IS STILL INLINE-BLOCK WHEN THE DOT IS NOT. The squash that
brings the two dots of the colon together is a transform, and a transform
does nothing at all to a plain inline element. So the colon has to be a
box, and being a box it is something a browser is allowed to break the
line in front of, which is the fault the dot had.
IT DOES NOT HAPPEN IN PRACTICE and I checked rather than assumed: every
colon on all four pages, at ten widths from 320 to 1440, in both
languages, sits on the line with the word before it. The colons all
follow short words with room to spare, which is why.
IF ONE EVER DOES DROP TO A LINE OF ITS OWN, the fix is to give this rule
display: inline and position: relative the way .Dot has them in
Negar-Default.css [03 TYPE], and lose the squash. Tighter dots or a
guarantee: you can have either, not both, and today you have the tighter
dots with the guarantee holding anyway. */
/* [H9 FORM] + [H10 SOCIAL] ====================================================
[H9 FORM]
[H10 SOCIAL]
--------------------------------------------------------------------------
>>> THESE TWO BLOCKS HAVE MOVED. They are now in CSS/Contact.css, under
[C3 FORM] and [C5 ICONS], together with everything new the contact page
grew this round: the two columns, the name-and-email row, the send row,
and v1's icon hover brought back.
WHY, in one line: they styled one page, this file is loaded by four, and
it had reached 1,470 lines doing three unrelated jobs. The full reasoning
is in the header of Contact.css.
THEY MOVED, THEY WERE NOT COPIED. There is no second version of these
rules anywhere. If you search for [H9 FORM] and land here, the rule you
want is one file away, under the new tag.
WHAT DELIBERATELY STAYED IN THIS FILE, because Coming.html and Error.html
need it too:
[H7 QUIET] the .Quiet block, its side margins and its links
[H8 COLON] the colon, which is a site-wide mark
Contact.html loads all three stylesheets now, in this order:
Negar-Default.css -> index.css -> Contact.css
If the contact form ever renders as plain boxes on a white page, that
third is the first thing to check.
========================================================================== */
/* [H7 QUIET] MODE D ---- vertical small -----------------------------------
On a phone the column has become a bar across the top, so the left step
that keeps the text clear of the column is not needed. */
@media (orientation: portrait) and (max-width: 500px) {
/* No column beside the text on a phone, so the side margins go. And the
links stack rather than sitting in a row, so space-between would push
them to opposite ends of a column, which is not what "justified"
means. Flush left is right here. */
.Quiet {
--NQuietSide: 0;
}
.QuietActions {
justify-content: flex-start;
gap: calc(var(--NGap) * 1);
}
}
/* ==========================================================================
END OF INDEX.CSS
========================================================================== */