@charset "UTF-8";
/* ==========================================================================
CONTACT.CSS
ntabibian.com :: CONTACT PAGE ONLY :: v2
--------------------------------------------------------------------------
WRITTEN : 2026-09-14
LOADS AFTER : Negar-Default.css, then index.css (all three, in order)
USED BY : Contact.html, and nothing else
WHY THIS FILE EXISTS. You asked whether the contact rules should grow
inside index.css or move into a file of their own on top of the other
two. A file of its own, and here is the reasoning on the record.
index.css had reached 1,470 lines doing three jobs at once: the landing
page, the furniture the three quiet pages share, and the contact form.
The form has now grown a two-column grid, a field row, a send row and a
set of icon hovers carrying four brand colours. Left where it was, that
is a third of a file every page on the site downloads in order to use a
tenth of it, and the one page it belongs to is the page you edit most.
It also matches the shape the site already has: Art.html loads Art.css,
Artist.html loads Art.css then Artist.css. A page with content of its
own gets a stylesheet of its own. Research and Design will do the same.
WHAT MOVED HERE, and it MOVED rather than being copied. [H9 FORM] and
[H10 SOCIAL] are gone from index.css; there is one home for each rule.
index.css keeps a signpost where they used to be so a search for the old
tag still lands somewhere useful.
WHAT STAYED IN index.css, on purpose: [H7 QUIET], because Coming.html
and Error.html use it too, and [H8 COLON], because the colon is a
site-wide mark. Do not move those.
--------------------------------------------------------------------------
SEARCH TAGS IN THIS FILE
[C0 DIALS] every number worth turning, in one place
[C1 TITLE] the heading, and why it is smaller now
[C2 COLS] the two columns: form beside the other places
[C3 FORM] fields, the name/email row, the send row, the note
[C4 ELSEWHERE] the second column's heading and rule
[C5 ICONS] the social icons and their v1 hover, restored
[C6 FARSI] what the Persian side needs that the English does not
[MODE A] horizontal standard landscape, min-height: 501px
[MODE B] vertical standard portrait, min-width: 501px
[MODE C] horizontal small landscape, max-height: 500px
[MODE D] vertical small portrait, max-width: 500px
THE BREAKPOINT IS 500 / 501 AND IT IS WRITTEN IN FIVE PLACES NOW: the
table above, the four queries below, and the same again in
Negar-Default.css and index.css. Move one, move all of them.
--------------------------------------------------------------------------
THE BRACE RULE, because it has cost two rounds already. One stray or
missing brace ends a media query early or swallows the rest of a file,
and NOTHING reports it. If a rule in here stops working for no reason,
strip the comments and count { against } before looking anywhere else.
They must be equal.
========================================================================== */
/* [C0 DIALS] ==================================================================
[C0 DIALS]
--------------------------------------------------------------------------
Everything on this page that is worth turning by hand, gathered. Change a
number here and it moves everywhere it is used, in all four modes.
THE AXIS RULE HOLDS, as everywhere else on the site: anything horizontal
comes from --NSideW / --NPadX / --NDiscW, anything vertical from --NGap.
None of these invent a new unit.
========================================================================== */
:root {
/* THE HEADING. You said it was far too big, and it was: the old cap was
2.9rem with 6cqi under it. Both are roughly halved.
1cqi is one per cent of .Quiet, not of the window, which is what lets
one number be right in all four modes. index.css [H7 QUIET] declares
.Quiet a container; that is where the cqi comes from. */
--CTitle: min(1.9rem, 4.2cqi);
--CTitleGap: calc(var(--NGap) * 1.1); /* under the heading */
/* THE LABELS, AND THE WARNING LINE UNDER THE BUTTON.
ONE NUMBER FOR BOTH, which is what you asked for: "Please never send
money..." was set at 0.7 x --NGap, noticeably smaller than "Your
email address" above it, and it now matches that label exactly. If
you change one you change both, which is the point of the variable. */
--CLabel: clamp(0.9rem, 1.1vw, 1.05rem);
/* THE FIELDS. */
--CFieldGap: calc(var(--NGap) * 0.8); /* under each field */
--CRowGap: calc(var(--NGap) * 1.2); /* between name and email */
--CMsgRows: calc(var(--NGap) * 4.2); /* the message box's floor */
/* THE TWO COLUMNS. The first number is the gutter between them, the
second is how the width is split: form, then the other places. */
--CColGap: calc(var(--NGap) * 2.6);
--CColSplit: 1.5fr; /* against 1fr for the aside */
/* THE ICONS. --CIconRest is how pale they sit before you touch them.
v1's value was 0.4 and that is what is set here, so they look exactly
as they did. It is worth knowing WHY 0.4 and not lower: whitish at
0.4 over the navy measures 3.57:1, which clears the 3:1 that WCAG
asks of a control you have to be able to see. At 0.3 it is 2.9:1 and
fails. So 0.4 is both your design and the floor; going paler is the
one direction this dial should not go. */
--CIconRest: 0.4;
--CIconSize: calc(var(--NGap) * 1.9);
--CIconTurn: 22deg; /* v1's exact rotation */
--CIconGap: calc(var(--NGap) * 1.2);
}
/* [C1 TITLE] ==================================================================
[C1 TITLE]
--------------------------------------------------------------------------
THE HEADING, "Let's get in touch:".
IT STAYS LEVEL WITH THE ART DISC, which you said you liked. That is not
done here: .Main-Quiet inherits --NContentTop from .Main in
Negar-Default.css [06 LAYOUT], the same number the disc stack is pinned
to, so the first line of this page and the top of the Art disc start on
the same pixel. Nothing in this file may add a top margin above the
heading or that alignment goes.
IT STAYS ON ONE LINE. .QuietTitle-OneLine in index.css [H7 QUIET] sets
white-space: nowrap and the fluid size. Both class names are in that
selector so it outranks the plain .QuietTitle rule that follows it; the
rule below outranks both again, on three classes, which is why the size
here is the one that wins.
========================================================================== */
.ContactTitle.QuietTitle.QuietTitle-OneLine {
font-size: var(--CTitle);
margin-bottom: var(--CTitleGap);
}
/* [C2 COLS] ===================================================================
[C2 COLS]
--------------------------------------------------------------------------
THE TWO COLUMNS: the message form, and the other places beside it.
THIS IS THE MOVE THAT GETS THE PAGE ONTO ONE SCREEN. "Or find me here"
and the three icons used to sit UNDER the form, which made the page about
1.6 screens tall in landscape and forced a scroll for the sake of a rule
and three icons. Beside it, everything fits.
ONE COLUMN IS THE DEFAULT AND TWO IS THE EXCEPTION. The rule below is the
stacked version, and [MODE A] and [MODE C] turn it into two. That way any
screen shape nobody anticipated falls back to the arrangement that cannot
break, rather than to the one that needs room.
THE SOURCE ORDER IS NEVER TOUCHED. The form comes first in the HTML and
first in every mode, so what a screen reader hears and what the Tab key
walks is what the eye sees, in all four. Nothing here uses grid-area or
order to move a block past another one.
align-items: start stops the shorter column stretching to the height of
the taller one, which is what would otherwise put the green rule under
"Or find me here" somewhere halfway down the message box.
========================================================================== */
.ContactCols {
display: grid;
grid-template-columns: 1fr;
align-items: start;
gap: var(--CColGap);
}
/* [C3 FORM] ===================================================================
[C3 FORM]
--------------------------------------------------------------------------
THE MESSAGE FORM.
FOCUS IS VISIBLE AND IT MATTERS MORE HERE THAN ANYWHERE. A form is the one
place on the site where someone has to know which box they are typing in.
Every field gets a green border and a soft glow on focus, not just a ring,
because the whole box needs to read as active.
INPUTS DO NOT INHERIT FONTS. A browser sets its own face and size inside
form controls unless told otherwise, which is why font-family and font-size
are stated explicitly below. Remove them and the form quietly stops looking
like the rest of the site.
16px IS A FLOOR, NOT A STYLE CHOICE. Safari on iPhone zooms the whole page
in when a visitor focuses a field whose text is under 16px, and then does
not zoom back out. Keeping the minimum at 1rem avoids it.
========================================================================== */
.ContactForm {
display: block;
margin-top: 0;
}
/* NAME AND EMAIL, SIDE BY SIDE, which is what you asked for.
TWO COLUMNS EVERYWHERE EXCEPT A PHONE HELD UPRIGHT. [MODE D] puts them
back into one, because two text fields sharing a 320px screen are two
fields whose labels wrap onto three lines each.
minmax(0, 1fr) RATHER THAN 1fr, and this is not decoration. A grid track
written 1fr will not shrink below the width of what is inside it, and an
carries a default size of about 20 characters. Two of those plus
the gutter is wider than a narrow column, so the row would push the page
sideways and give you a horizontal scrollbar. minmax(0, 1fr) lets the
track go narrower than its contents, which is what makes the fields
obey the column instead of the other way round. */
/* align-items: end IS DOING REAL WORK, IT IS NOT TIDINESS.
"Your name" is one line and "Your email address" is one line on a wide
screen and TWO on a narrow one. When that happens the email field's box
grows taller, and with the default stretch the two input boxes ended up
on different lines: the name box sat about nineteen pixels above the
email box, which on a phone held sideways looked like a mistake.
Bottom-aligning the two fields pins the two INPUTS to the same line
whatever their labels do, and costs no height at all. Measured at 844x390
and 932x430, where the wrap actually happens: 0px apart.
The alternative was to reserve two label lines in every mode, which would
have added about twenty pixels of dead space to the one mode with the
least room to give. */
.FormRow {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: end;
column-gap: var(--CRowGap);
}
.FormField {
margin-bottom: var(--CFieldGap);
min-width: 0;
}
.ContactForm label {
display: block;
margin-bottom: calc(var(--NGap) * 0.25);
font-size: var(--CLabel);
line-height: 1.3;
color: var(--NColor5);
}
/* THE 52ch CAP IS GONE. It was there to stop a message box a metre wide on
a large screen; the form is now half the page rather than all of it, so
the column itself is the cap and a second one only made the fields
narrower than the heading above them. */
.ContactForm input[type="text"],
.ContactForm input[type="email"],
.ContactForm textarea {
width: 100%;
padding: 0.55em 0.75em;
font-family: var(--NFontEN);
font-size: max(1rem, 0.95vw);
line-height: 1.4;
color: var(--NColor5);
background-color: rgba(245, 247, 247, 0.05);
border: 1px solid var(--NColor4);
border-radius: 3px;
transition: border-color 0.2s var(--NEase),
box-shadow 0.2s var(--NEase),
background-color 0.2s var(--NEase);
}
/* THE MESSAGE BOX IS SHORTER, as you asked: rows="3" in the HTML and the
floor below, where it used to be 8em. It still drags taller by its
corner if someone has a lot to say, which is what resize: vertical is
for, and a browser will not let it be dragged narrower than the column. */
.ContactForm textarea {
resize: vertical;
min-height: var(--CMsgRows);
display: block;
}
.ContactForm ::placeholder {
color: var(--NColor4);
opacity: 0.65;
}
.ContactForm input:focus,
.ContactForm textarea:focus {
outline: none; /* replaced, not removed, see below */
border-color: var(--NColor3);
background-color: rgba(245, 247, 247, 0.08);
box-shadow: 0 0 0 3px rgba(148, 208, 9, 0.25);
}
/* The one place on the site where outline: none is allowed, because the
border and the glow above are a stronger focus signal than the ring they
replace. Never do this without putting something else in its place. */
/* SEND, AND THE WARNING, ON ONE ROW.
You asked for the button to sit in front of the text rather than above
it. flex-wrap is the safety net: on a narrow column the note drops under
the button by itself rather than squeezing to two words a line.
align-items: center puts the button's middle on the note's middle, which
reads better than either top or baseline when the note runs to two lines.
*/
.FormSend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(var(--NGap) * 0.5) var(--CRowGap);
margin-top: calc(var(--NGap) * 0.3);
}
/* BOLDER, as you asked. 700 plus the wider letter-spacing is what makes a
five-letter word read as a button rather than a label. */
.SendBtn {
flex: 0 0 auto;
margin-top: 0;
padding: 0.6em 2em;
font-family: var(--NFontEN);
font-size: max(1rem, 0.95vw);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--NColor1);
background-color: var(--NColor3);
border: 2px solid var(--NColor3);
border-radius: 3px;
cursor: pointer;
transition: background-color 0.25s var(--NEase),
color 0.25s var(--NEase);
}
/* THE FARSI "ارسال" GETS THE PERSIAN FACE. Without this it would render in
Century Gothic, which has no Persian letters at all, and the browser
would substitute whatever it had to hand. */
.Lang-fa .SendBtn {
font-family: var(--NFontFA);
font-weight: 700;
}
.SendBtn:hover,
.SendBtn:focus-visible {
background-color: transparent;
color: var(--NColor3);
}
/* THE WARNING LINE, now the same size as a field label, which is what you
asked for: both read --CLabel in [C0 DIALS].
flex: 1 1 14em means "take the rest of the row, but if there is less than
about fourteen characters' worth left, go to your own line instead".
That single number is what stops it ever becoming a two-word column
beside the button. */
.FormNote {
flex: 1 1 14em;
margin: 0;
font-size: var(--CLabel);
line-height: 1.45;
color: var(--NColor4);
}
/* THE PERSIAN FORM READS RIGHT TO LEFT BY ITSELF, because the script sets
dir="rtl" on and a text field inherits the document's direction.
Only the face has to be said by hand.
THE EMAIL FIELD IS THE EXCEPTION and it carries dir="ltr" in the HTML: an
address is a left-to-right string in any language, and without that the
@ and the dot land at the wrong end as you type. Negar-Default.css
[15 RTL] already hands anything marked dir="ltr" back to Century Gothic,
which is right for an address, so this rule deliberately does not name
it. */
.Lang-fa .ContactForm input[type="text"],
.Lang-fa .ContactForm textarea,
.Lang-fa .ContactForm ::placeholder {
font-family: var(--NFontFA);
}
/* [C4 ELSEWHERE] ==============================================================
[C4 ELSEWHERE]
--------------------------------------------------------------------------
THE SECOND COLUMN: "Or find me here", a green-grey rule, three icons.
THE WORDING CHANGED because you said the old line was useless. It was:
"I am just as glad to be found in other places" is a whole sentence of
throat-clearing over three icons, and at the head of a narrow column it
wrapped to three lines and pushed the icons off the bottom of the screen.
Alternatives are listed in Contact.html [Q2 SOCIAL]; change the text in
both the attribute and the tag, and the Farsi with them.
THE TOP OF THIS COLUMN LINES UP WITH THE TOP OF THE FORM, not with the
heading: .Follow carries no top margin, so its first line sits level with
"Your name" across the gutter. That is the alignment worth having here,
since the heading spans both columns above them.
========================================================================== */
.ContactAside {
min-width: 0;
}
.Follow {
margin-top: 0;
margin-bottom: 0;
font-size: var(--CLabel);
line-height: 1.3;
color: var(--NColor5);
}
.FollowRule {
border: 0;
border-top: var(--NRuleWidth) solid var(--NColor4);
margin: calc(var(--NGap) * 0.5) 0 calc(var(--NGap) * 0.7);
}
/* [C5 ICONS] ==================================================================
[C5 ICONS]
--------------------------------------------------------------------------
THE SOCIAL ICONS, AND v1's HOVER BROUGHT BACK, which is what you asked
for.
WHAT v1 DID, and what happens again now. At rest every icon is whitish and
pale. On hover, or on keyboard focus, it turns 22 degrees and comes up to
full strength in its own colours:
email envelope green, the letter inside it yellow
LinkedIn LinkedIn blue on a white tile
Instagram its full warm-to-blue gradient, camera cut out in white
X white mark on a black tile (hidden, kept for the day)
FOCUS GETS THE SAME TREATMENT AS HOVER, every time, which v1 did not do.
A hover-only effect is invisible to anyone using a keyboard, and this is
the one place on the page where the effect is also the feedback.
THE GRADIENTS LIVE IN THE SVG, NOT HERE. fill: url(#InstaSVG0) points at
a in Contact.html [Q2 SOCIAL]. They had been stripped of
their ids and every stop colour when the icons came over from v1, which is
why the Instagram hover did nothing at all. If it ever goes flat again,
those two ids are the thing to check, in that order: the id, then the
stops.
WHY THE TRANSITION IS ON THE SVG AND THE COLOURS ARE ON THE PARTS. A
transform applies to the whole drawing, so it belongs on the