Cv-interactif/interview.css at main · davidgenty/Cv-interactif · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
.interview-page{background:radial-gradient(circle at 72% 8%,rgba(124,140,255,.08),transparent 32%),var(--bg)}
.interview-page .main-nav{gap:18px}
.interview-hero{padding-top:72px;padding-bottom:62px}
.interview-intro{width:100%}
.interview-intro h1{max-width:none;font-size:clamp(4rem,9vw,8.4rem);line-height:.88;letter-spacing:-.065em;margin:20px 0 30px;white-space:nowrap}
.interview-intro h1 em{font-style:normal;color:var(--lime)}
.interview-lead{max-width:860px;margin:0;color:#aeb8c8;font-size:1.12rem}
.chapter{padding-top:38px;padding-bottom:30px;scroll-margin-top:72px}
.chapter+.chapter{padding-top:100px}
.chapter-heading{display:grid;grid-template-columns:160px 1fr;gap:28px;align-items:start;margin-bottom:42px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.chapter-index{padding-top:10px;color:var(--mint);font-size:.72rem;letter-spacing:.12em}
.chapter-heading h2{max-width:none;margin:0;font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.05;letter-spacing:-.035em;white-space:nowrap}
.chapter-heading p{max-width:710px;margin:16px 0 0;color:#9fa9b8;font-size:1.02rem}
.interview-flow{display:grid;gap:34px}
.exchange{display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);gap:18px;align-items:start}
.question-card,.answer-card,.closing-card{border:1px solid var(--line);box-shadow:var(--shadow)}
.question-card{position:sticky;top:98px;padding:25px;border-radius:20px;background:linear-gradient(150deg,rgba(124,140,255,.13),rgba(13,17,24,.96));border-color:rgba(124,140,255,.24)}
.question-card h3{margin:13px 0 0;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.28;letter-spacing:-.02em}
.answer-card{padding:30px 34px;border-radius:20px;background:linear-gradient(180deg,rgba(19,24,33,.94),rgba(13,17,24,.94));border-left:2px solid rgba(68,215,182,.55)}
.answer-card p{margin:0 0 15px;color:#c2cad6;font-size:1.02rem;line-height:1.75}.answer-card p:last-child{margin-bottom:0}.answer-card strong{color:#fff}
.answer-list{margin:-4px 0 18px;padding-left:24px;color:#c2cad6;font-size:1.02rem;line-height:1.75}.answer-list li::marker{color:var(--mint)}
.role-tag{display:block;font-size:.66rem;letter-spacing:.12em;font-weight:750}.journalist-tag{color:#aeb8ff}.david-tag{margin-bottom:16px;color:var(--mint)}
.highlight-answer{background:linear-gradient(150deg,rgba(68,215,182,.07),rgba(13,17,24,.96));border-color:rgba(68,215,182,.24)}
.closing-card{margin-left:calc(27% + 18px);padding:38px;border-radius:22px;background:linear-gradient(145deg,rgba(124,140,255,.1),rgba(13,17,24,.97))}
.closing-card>p{color:#bac4d2}.closing-card>p:first-of-type{margin-top:18px;color:#fff;font-size:1.1rem;font-weight:700}.closing-card blockquote{margin:22px 0;padding-left:22px;border-left:2px solid var(--accent);color:#eef1f6;font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.5}
.interview-contact{padding-top:90px}.interview-contact .contact-panel{margin-top:0}
@media(max-width:1080px){.interview-intro h1{white-space:normal}.exchange{grid-template-columns:1fr}.question-card{position:relative;top:auto}.closing-card{margin-left:0}}
@media(max-width:700px){.interview-hero{padding-top:42px;padding-bottom:38px}.interview-intro h1{font-size:clamp(3.2rem,16vw,5rem)}.interview-lead{font-size:1.02rem}.chapter{padding-top:32px}.chapter+.chapter{padding-top:72px}.chapter-heading{grid-template-columns:1fr;gap:10px;margin-bottom:28px}.chapter-index{padding-top:0}.chapter-heading h2{font-size:clamp(1.75rem,8vw,2.35rem);white-space:normal}.question-card{padding:22px}.answer-card{padding:24px 22px}.answer-card p{font-size:1rem;line-height:1.68}.closing-card{padding:26px 22px}.interview-contact{padding-top:64px}}

/* V2.8 — titres et sections alignés sur le portfolio */
.interview-hero{padding-top:64px;padding-bottom:54px}

.interview-intro h1{
  margin:18px 0 24px;
  font-size:clamp(2.4rem,4vw,3.25rem);
  line-height:1.02;
  letter-spacing:-.045em;
  white-space:nowrap;
}

.interview-lead{max-width:none}

.chapter-heading{
  grid-template-columns:1fr;
  gap:7px;
  margin-bottom:34px;
  padding-bottom:24px;
}

.chapter-index{padding-top:0}

.chapter-heading h2,
.interview-contact .contact-panel h2{
  max-width:none;
  margin:0;
  font-size:clamp(1.65rem,1.75vw,1.75rem);
  line-height:1.12;
  letter-spacing:-.025em;
  white-space:nowrap;
}

.chapter-heading p{
  max-width:none;
  margin:10px 0 0;
}

.interview-contact .contact-panel{
  grid-template-columns:1fr;
  gap:22px;
  padding:32px 34px;
}

.interview-contact .contact-panel h2{margin-top:14px}

.interview-contact .contact-data{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.interview-contact .contact-data a{min-width:0}
.interview-contact .contact-data a span{margin-left:auto}

@media(max-width:900px){
  .interview-contact .contact-data{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
  .interview-intro h1{
    font-size:clamp(2.55rem,14vw,3.45rem);
    white-space:normal;
  }

  .chapter-heading h2,
  .interview-contact .contact-panel h2{white-space:normal}
  .interview-contact .contact-panel{padding:24px 22px}
}

@media(max-width:620px){
  .interview-contact .contact-data{grid-template-columns:1fr}
}